Html 文本区域之间意外的边距-因浏览器而异

我有多个文本区域。一个在另一个下面。它们之间不应该有任何间距，因为我显式地将它们的边距设置为0

然而，在chrome上，有一个相当大的差距，在firefox上，差距很小，但仍然存在，在IE上，它实际上表现出了预期的

正文{
背景色：#0087B3；
字体系列：Helvetica，无衬线；
}
.编辑{
宽度：460px；
显示：内联块；
}
.小组{
文本对齐：左对齐；
利润率：10px；
填充：12px；
背景色：rgba（255255,0.1）；
}
.面板.工具栏{
背景色：#007da6；
高度：40px；
}
.面板.线条{
高度：400px；
背景色：#ACE1F2；
}
.panel.lines文本区域{
调整大小：无；
字体家族：继承；
字号：12号；
填充：8px；
框大小：边框框；
宽度：100%；
高度：自动；
溢出：隐藏；
边框：0非白色；
大纲：无；
保证金：0；
}

应该没有空间
在这些文本区域之间
然而，在chrome和firefox中有
除了internet explorer

您需要添加

显示：块到您的文本区域样式

.panel .lines textarea {
  resize: none;
  font-family: inherit;
  font-size: 12pt;
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  overflow: hidden;
  border: 0 none white;
  outline: none;
  margin: 0;
  display: block;
}

请在此处查看更新的小提琴：

唯一的解决方法是将显示指定为与框大小匹配

display: -webkit-box;

谢谢你，阿什！“块”显示类型有什么特别的区别吗？在您的情况下没有。对于“block、flex、flex-root、grid、list-item”也同样适用。它所做的只是指定一个定义，使不同的浏览器理解您指定的内容，而不是在渲染过程中假设任何内容。