CODEWITHSUNDEEP
htmlcss
Sven
Sven

Reputation: 13296

Line-height & input button height

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: 17005

Answers (3)

Brad Allred
Brad Allred

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

David Thomas
David Thomas

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

Kamil
Kamil

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

Related Questions