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 >
  <div >
    <div >
      <button >
        1
      </button>
    </div>
    <div >
      <button >
        2
      </button>
    </div>
  
  
  </div>
  <textarea ></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.

CodePudding user response：

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

CodePudding user response：

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 >
  <div >
    <div >
      <button >
        1
      </button>
    </div>
    <div >
      <button >
        2
      </button>
    </div>
  
  
  </div>
  <textarea ></textarea>
</div>