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

我正在努力解决我的问题在 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 class="btn"><div class="txt"></div></div>

解决方法

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

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

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