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

Question

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

工作正常,改为简单的块

独立测试文件的示例:.btn {padding:0px; 边框:1px纯红色; display: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>

Answer 1

创建.txt元素时inline-block,它将被带入父.btn元素的文本流中.此时,.btn踢入的线高,大于.txt元素的高度.

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

当你创建内部元素a时没有这个问题block,因为那时没有类似文本的内容,所以根本没有应用行高.

Answer 2

inline-block对于这么多病例来说,它非常方便.但它们带来了一个恼人的陷阱:不必要的空白.当您在内联块中嵌套内联块时,会导致白色空间灾难.您可以在David Walsh的博客上阅读有关空白和内联块的所有内容.

有很多方法可以解决这个问题,但我最喜欢的(也是最广泛支持的)解决方案是将其设置为父inline-block元素:

.btn {
  font-size: 0;
}

以下是之前/之后的示例:http: //jsfiddle.net/C6V3S/1/