height in EM not adding up to same value for buttons and textarea

user_1821341 0
Viewed 51

So in this fiddle I boiled down the example to the bare minimum:

.wrapper {
  display: flex;
}

.mybutton {
  height: 4em;
  width: 4em;
}

.mytextarea {
  height: 8em;
  resize: none;
}
```
<div class="wrapper">
  <div class="buttonWrapper">
    <div class="buttonRow1">
      <button class="mybutton">
        1
      </button>
    </div>
    <div class="buttonRow2">
      <button class="mybutton">
        2
      </button>
    </div>
  
  
  </div>
  <textarea class="mytextarea"></textarea>
</div>

Simple question: why is the textarea bigger (height) than the buttons? Buttons are set to height 4 em each and the textarea to 8em.

Is 8 em != 2x4em ???

I know there are other ways to get the text area have the exact same height like the buttons in this specific example, I am just baffled about this behavior at the moment.

css html
2 Answers

The textarea starts with some basic padding and border, making those none rather than the defaults. It will fix this issue

user_87974130

button and textarea have different values by default (for padding, border...), and since the default way is to add up padding and border to the height of elements, you are getting what you see. However, you could set box-sizing:border-box to change this behaviour.

Also, em unit is relative to the font size of an element. So if you change later the font size of button or textarea, you might get a different result.

*{
  box-sizing:border-box;
}

.wrapper {
  display: flex;
}

.mybutton {
  height: 4em;
  width: 4em;
}

.mytextarea {
  height: 8em;
  resize: none;
}
<div class="wrapper">
  <div class="buttonWrapper">
    <div class="buttonRow1">
      <button class="mybutton">
        1
      </button>
    </div>
    <div class="buttonRow2">
      <button class="mybutton">
        2
      </button>
    </div>
  
  
  </div>
  <textarea class="mytextarea"></textarea>
</div>

user_152886410
Related