Html 当按钮直接放置在文本区域下方时，会创建额外的空间

在文本区域正下方放置按钮时，Chrome和Firefox都会产生额外的空间（我还没有测试过其他浏览器）。这是一个复制问题的例子。代码如下：

HTML

<div>
    <textarea></textarea>
    <button></button>
</div>

---

将

文本区域上的
显示
属性更改为
块
，它们之间应该没有间隙。通常，当我有一些HTML元素没有正确排列时，我会使用
display
属性，因为它通常是罪魁祸首

演示：
将
文本区域
上的
显示
属性更改为
块
，它们之间应该没有间隙。通常，当我有一些HTML元素没有正确排列时，我会使用
display
属性，因为它通常是罪魁祸首

演示：
您可以：

1-将
display:block
添加到所有孩子

演示：

2-在父div上设置
font-size:0
，并在所有子div上重置它（例如
font-size:16px
）

演示：

3-将
float:left
和
clear:all
设置为所有孩子

演示：
您可以：

1-将
display:block
添加到所有孩子

演示：

2-在父div上设置
font-size:0
，并在所有子div上重置它（例如
font-size:16px
）

演示：

3-将
float:left
和
clear:all
设置为所有孩子

演示：
效果非常好。谢谢真奇怪。我在水平方向上看到过这个问题，但在垂直方向上从来没有看到过……在这种情况下，它不是罪魁祸首-它是内联格式上下文中元素的默认
vertical align
基线值。@Adrift看起来有几种方法可以剥除这只猫的皮，你认为它们都会影响垂直对齐吗？真正的罪魁祸首是谁？我不知道为什么更改
显示
属性会起作用，这只是我的一段时间尝试。效果非常好。谢谢真奇怪。我在水平方向上看到过这个问题，但在垂直方向上从来没有看到过……在这种情况下，它不是罪魁祸首-它是内联格式上下文中元素的默认
vertical align
基线值。@Adrift看起来有几种方法可以剥除这只猫的皮，你认为它们都会影响垂直对齐吗？真正的罪魁祸首是谁？我不知道为什么更改
显示
属性有效，这只是我的一段时间的目标。
div {
    width: 100px;
    height: 125px;
}
textarea {
    width: 100px;
    height: 100px;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: red;
    resize: none;
}
button {
    width: 100px;
    height: 25px;
    border: none;
    background: blue;
    margin: 0;
    padding;
}