Html 字段集中的文本区域留有底部间隙

我试图弄明白为什么Chrome在使用字段集标记中的textarea时会留下底部间隙

如果你看下面的Chrome小提琴，你会很有希望明白我的意思

fiddle CSS包含Eric Meyers标准重置，我已经重置了输入和文本区域标记上的边距和填充。HTML元素之间不包含空格

<form>
<fieldset><input type='text'/></fieldset>
<fieldset><input type='text'/></fieldset>
<fieldset><textarea>Hello</textarea></fieldset>
<fieldset><textarea>Hello</textarea></fieldset>
</form>  

你好
你好

Firefox和IE的渲染似乎在字段集之间没有间隙。Chrome会留下一个间隙，但只有在字段集包含textarea时才会留下间隙。知道为什么吗

---

我使用的是Chrome 56.0.2924.87版。

您应该在css中添加以下语句

字段集{填充：0px；}

字段集之间没有留下间隙，而是内部的文本区域没有完全填充它们。原因是textarea具有默认属性“display:inline block”，这意味着其高度将由内部内容定义。我认为另一个原因是铬合金赋予了它最小的高度

---

因此，我建议您将文本区域设置为css属性“display:block”，以便填充其容器的高度。

使用

display:flex在所有浏览器上运行相同的输出

fieldset{
    display: flex;
}

或

input, textarea{
        display: flex;
    }


/*http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
许可证：无（公共域）
*/
html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
/*旧浏览器的HTML5显示角色重置*/
文章，旁白，细节，图表，
页脚、页眉、H组、菜单、导航、节{
显示：块；
}
身体{
线高：1；
}
ol，ul{
列表样式：无；
}
区块报价，q{
报价：无；
}
blockquote:before，blockquote:after，
问：之前，问：之后{
内容：''；
内容：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
输入，
文本区{
保证金：0；
填充：0；
}
字段集{
显示器：flex；
}

你好
您好
您正在使用
font:inherit在底部。Chrome正在添加其默认的线条高度。Firefox的默认行高为1.1，而Chrome的默认行高为1.2

简写：
font:font-style字体变体字体重量字体大小/行高字体系列；

这会解决你的问题

fieldset{ line-height:0}

签出此：

问题:

每个浏览器都有一种显示元素的自定义方式。Chrome设置显示：块和一些webkit页边距，但覆盖它们不起作用

fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    min-width: -webkit-min-content;
    border-width: 2px;
    border-style: groove;
    border-color: threedface;
    border-image: initial;
}

解决方案：

在其他答案的基础上，给textarea元素添加
垂直对齐：中间


/*http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
许可证：无（公共域）
*/
html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
/*旧浏览器的HTML5显示角色重置*/
文章，旁白，细节，图表，
页脚、页眉、H组、菜单、导航、节{
显示：块；
}
身体{
线高：1；
}
ol，ul{
列表样式：无；
}
区块报价，q{
报价：无；
}
blockquote:before，blockquote:after，
问：之前，问：之后{
内容：''；
内容：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
输入，
文本区{
保证金：0；
填充：0；
/*这同样有效*/
垂直对齐：中间对齐；
}

你好
你好
Hi，Flex不是一个真正的选项，它还没有完全被支持。是的，这确实解决了这个问题，但我希望在textarea旁边有一个标签标签，而不是浮动的，所以这对我正在做的网站来说不是一个解决方案，谢谢你的关注。谢谢，这对我来说最有效。我将行高声明移动到文本区域标记，这样就不会影响任何其他元素。
fieldset {
        display: flex;
    }