html – 为什么display = inline-block增加不可控制的垂直边距

概述我正在努力解决我的问题在 http://jsfiddle.net，并有最奇怪的行为。你能解释这些( http://jsfiddle.net/C6V3S/)垂直边距是从哪里来的？出现在jsfiddle.net(至少在Chrome和FF中)，当复制/粘贴到本地独立文件时，不会出现… 工程可以改为简单的块 独立测试文件示例：          .btn {         padding：0px;    我正在努力解决我的问题在 http://jsfiddle.net，并有最奇怪的行为。你能解释这些( http://jsfiddle.net/C6V3S/)垂直边距是从哪里来的？出现在Jsfiddle.net(至少在Chrome和FF中)，当复制/粘贴到本地独立文件时，不会出现…

工程可以改为简单的块

独立测试文件示例：

.btn {
padding：0px;
边框：1px纯红色;
显示：inline-block;
}

.txt {    display: inline-block;    wIDth: 12px;    height: 12px;    border: none;    padding: 0;    margin: 0;    background: #77FF77;}</style><div ><div ></div></div>

解决方法 当您使.txt元素内联块时，它将进入父.btn元素的文本流。在这一点上，.btn的线高度踢入，大于.txt元素的高度。

所以，添加.btn {line-height：10px;}(例如)，你的问题是固定的。我看到你已经试图影响内部的.txt元素的线高，所以你的尝试相当接近。调整字体大小也会起作用，因为默认行高是基于Font-size的公式。无论如何，关键是要在父元素上执行，而不是子元素。

当您使内部元素成为块时，您没有这个问题，因为那里没有类似文本的内容，所以没有应用任何行高。

总结

以上是内存溢出为你收集整理的html – 为什么display = inline-block增加不可控制的垂直边距全部内容，希望文章能够帮你解决html – 为什么display = inline-block增加不可控制的垂直边距所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。