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

Issue

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.

Solution

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>

Answered By - yousoumar