Reputation: 13296
I am creating button styles at the moment.
At the moment, they look like this:
html {
color: #555;
background: #fefefe;
font-size: 1em;
line-height: 1.5;
}
.btn {
display: inline-block;
text-decoration: none;
padding: 5px 10px;
background: #ccc;
border: 1px solid #cdcdcd;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet"/>
<a href="#" class="btn">Test</a>
<input type="button" value="Test" class="btn">
<input type="submit" value="Test" class="btn">
<input type="reset" value="Test" class="btn">
<button type="button" class="btn">Test</button>
<button type="submit" class="btn">Test</button>
<button type="reset" class="btn">Test</button>
As you can see, the three buttons created using input
look different than the rest.
After some debugging I found that it's the line-height
declaration on the html
element that is responsible for that.
How can I have my buttons look the same while having a line-height
set?
Note that I am already using normalize.css.
Upvotes: 1
Views: 17004
Reputation: 7534
as others have pointed out, you should set a line-height
for your .btn
class, however, I believe you actually want line-height: inherit;
specifically so you actually inherit the line-height.
Upvotes: 5
Reputation: 253506
Just set the line-height
to normal
, or to any other value, for the class of elements you wish to have look the same:
.btn {
display: inline-block;
text-decoration: none;
padding: 5px 10px;
background: #ccc;
border: 1px solid #cdcdcd;
line-height: normal; /* set a line-height for your elements */
}
html {
color: #555;
background: #fefefe;
font-size: 1em;
line-height: 1.5;
}
.btn {
display: inline-block;
text-decoration: none;
padding: 5px 10px;
background: #ccc;
border: 1px solid #cdcdcd;
line-height: normal; /* set a line-height for your elements */
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet"/>
<a href="#" class="btn">Test</a>
<input type="button" value="Test" class="btn">
<input type="submit" value="Test" class="btn">
<input type="reset" value="Test" class="btn">
<button type="button" class="btn">Test</button>
<button type="submit" class="btn">Test</button>
<button type="reset" class="btn">Test</button>
Upvotes: 1
Reputation: 2005
Set the same line-height
property to elements you need
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
line-height: 24px;
}
Upvotes: 2