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

我正在尝试在http://jsfiddle.net上摆弄我的问题，并在其中出现了最奇怪的行为。您能解释一下这些（http://jsfiddle.net/C6V3S/）垂直边距来自何处吗？确实出现在jsfiddle.net上（至少在Chrome和FF中），复制/粘贴到本地独立文件时不出现...



更改为简单块后可以正常工作


独立测试文件的样本：
    
    .btn {
        填充：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元素设置为inline-block时，它将被带入父级.btn元素的文本流中。此时，.btn的行高开始增大，该行高大于.txt元素的高度。

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

当您将内部元素设为block时，您就不会遇到此问题，因为这样就没有类似文本的内容，因此根本就没有行高。

关于html - 为什么display = inline-block增加了不可控制的垂直边距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56025371/