html - EM 中的按钮和文本区域的高度加起来不等于相同的值

Question

因此，在这个 fiddle 中，我将示例简化为最低限度:

.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>

简单的问题:为什么文本区域(高度)比按钮大？每个按钮的高度设置为 4em，文本区域的高度设置为 8em。

8 em != 2x4em ???

我知道还有其他方法可以使文本区域具有与此特定示例中的按钮完全相同的高度，但目前我对这种行为感到困惑。

Answer 1

button 和 textarea 默认情况下具有不同的值(对于 padding、border...)，并且由于默认方式是将 padding 和 border 添加到高度元素，你所见即所得。但是，您可以设置 box-sizing:border-box 来更改此行为。

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>