Html EM 中的高度不等于按钮和文本区域的相同值

发布于04月03日

所以在这把小提琴中，我把这个例子简化到了最低限度:

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

我知道还有其他方法可以让文本区域的高度与这个特定示例中的按钮完全相同，我只是对这种行为感到困惑.

推荐答案

默认情况下，button和textarea具有不同的值(用于填充、边框…)，由于默认的方法是将填充和边框添加到元素的高度，因此您将得到所看到的内容.但是，可以设置box-sizing:border-box来改变这种行为.

此外，em单位与元素的字体大小有关.因此，如果稍后更改字体大小button或textarea，可能会得到不同的结果.

*{
 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>

Html相关问答推荐

Html EM 中的高度不等于按钮和文本区域的相同值

推荐答案

Html相关问答推荐

自动字间距以适应行CSS

正文不能填满浏览器100%的高度

无法从路径参数获取ID

HX-POST未使用正确的操作(路径)

如何显示自定义按钮以将产品添加到WooCommerce购物车？

Div 容器不会遵守边距、填充或间隙

当多个a元素用作目标时的：target伪类

将箭头图标添加到工具提示包装器时遇到问题

如何垂直平移一个元素，使其新位置位于另外两个元素之间？

为什么 css position：fixed 不适用于对话框标签？

透明渐变凹矩形

什么没有 margin-right 和 width：100% 溢出子元素到左边？

在