html - 为什么 display=inline-block 会增加无法控制的垂直边距

Question

我正试图在 http://jsfiddle.net 上解决我的问题并且在那里有最奇怪的行为。你能解释一下这些 ( http://jsfiddle.net/C6V3S/ ) 垂直边距从何而来吗？出现在 jsfiddle.net 上(至少在 Chrome 和 FF 中)，复制/粘贴到本地独立文件时不出现 ...

在更改为简单 block 后工作正常

独立测试文件示例: .btn { 填充:0px； 边框:1px 纯红色； 显示:内联 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>

Answer 1

当您使 .txt 元素成为 inline-block 时，它会被纳入父 .btn 元素的文本流中。那时，.btn 的行高开始生效，它大于 .txt 元素的高度。

因此，添加 .btn {line-height: 10px;}(例如)，您的问题就解决了。我看到您已经尝试影响内部 .txt 元素的行高，因此您的尝试非常接近。调整字体大小也可以，因为默认行高是基于字体大小的公式。无论如何，关键是在父元素上执行此操作，而不是在子元素上执行此操作。

当你将内部元素设为 block 时，你不会遇到这个问题，因为那样就没有类似文本的内容，所以根本没有应用行高。