CODEWITHSUNDEEP
htmlcssfont-size
Oğuz Can Sertel
Oğuz Can Sertel

Reputation: 759

How to make button heights the same with different font sizes

I cannot make button heights same with different font sizes. I have to use em for height and width for responsive design.

Here is example jsfiddle

CSS:

body{
  font-size:16px;
}
.btn{
  height:4em;
  font-size:1em;
}
.btn2{
  height:4em;
  font-size:1.50em;
}

HTML:

<button class="btn">First Button is 64px as expected</button>
<br><br>
<button class="btn2">Why this is not same height with first one?</button>

<p>
  How to make same height buttons with differnet font sizes ? 
</p>

Upvotes: 2

Views: 3225

Answers (3)

David Thomas
David Thomas

Reputation: 253506

The reason that both <button> elements are different sizes is because you're defining the height in terms of the relative em unit of size, which is determined from the current font-size, and both <button> elements have different font-size.

While you say you "have to use em for…responsive sizing you can, instead, use the rem unit, which is the 'root-em' of the document, one rem will always be the same size regardless of the changed font-size of any descendant element.

For example:

let button1 = document.querySelector('button.btn'),
  button2 = document.querySelector('button.btn2');

console.log(button1.clientHeight, button2.clientHeight);
// 60 60 (in my browser, yours will vary, but both
// buttons should show the same size).
body {
  font-size: 16px;
  box-sizing: border-box;
}

.btn {
  height: 4rem;
  line-height: 4rem;
  font-size: 1em;
}

.btn2 {
  height: 4rem;
  line-height: 4rem;
  font-size: 1.50em;
}
<button class="btn">First Button is 32px as expected</button>
<br />
<br />
<button class="btn2">Why this is not same height with first one?</button>

<p>
  How to make same height buttons with differnet font sizes ?
</p>

Upvotes: 2

Luke G.
Luke G.

Reputation: 587

You're setting ems for the font, and ems for the height. An 'em' is equivalent to the current font size. It's set by your initial body CSS to 16px, so 1em = 16px, which * 4 for the height of btn is 64px. When you change the font size in btn2, you are adjusting the value of the em for that object as a whole, so your height of 4 em is now 1.5 * 16px * 4 = 96px.

Unless you are able to set the button's em value separately from the font size em I don't think you will succeed without manually reducing the 4em to something smaller so the math would work out on btn2. If you're looking to keep that a consistent 4em then I'd suggest nesting elements somehow so you can set the values on separate elements.

Upvotes: 1

chazsolo
chazsolo

Reputation: 8514

ems are tied to font sizes, so when you change the font-size of btn2 you are changing what height: 4em evaluates to. rems will solve this problem for you if you are able to use them:

body{
  font-size:16px;
}
.btn{
  height: 4rem;
  font-size:1em;
}
.btn2{
  font-size:1.50em;
  height: 4rem;
}
<button class="btn">First Button is 64px as expected</button>
<br><br>
<button class="btn2">Why this is not same height with first one?</button>

<p>
  How to make same height buttons with differnet font sizes ? 
</p>

Upvotes: 1

Related Questions