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>

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

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