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.
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,
emunit is relative to the font size of an element. So if you change later the font size ofbuttonortextarea, 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>The textarea starts with some basic padding and border, making those none rather than the defaults. It will fix this issue