我今天在设计中遇到了一个奇怪的行为。让我先向您展示我的代码,然后讨论
*,
*:after,
*::before {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
height: 100%;
padding: 0;
}
#all-content,
#content-outer,
#content-inner {
height: 100%;
position: relative;
}
#content-inner {
overflow-y: scroll;
}
.block {
display: inline-block;
font-size: 0;
background-color: yellow;
width: 50px;
height: 50px;
border: 3px solid black;
}
<div id="all-content">
<div id="content-outer">
<div id="content-inner">
<div id="main-field">
<div class="block">text</div>
<div class="block">text</div>
<div class="block">text</div>
<div class="block">text</div>
</div>
</div>
</div>
</div>
问题是,在这个代码中,有一个奇怪的顶部填充应用于#main-field
元素。有两种方法可以解决这个问题。将line-height : 50px
规则应用于.block
类,或者将字体大小更改为零以外的值。我想知道为什么会发生这种事,因为我从来没有遇到过这种奇怪的行为。
这就是为什么您不使用"hack"来删除块内联元素之间的空间。即使字体大小为0,文本仍然有行高,并且可能不知道如何操作,它占用了"块"上方的空间。
如果你仍然想使用你的代码,一个简单的解决方案是添加:
vertical-align:top
到您的块元素:FIDDLE
注意:使用float:)
为什么要设置font-size:0
?我猜您正在尝试从inline-block
元素之间删除空白的方法之一,但在这种情况下,您需要在inline-block
元素(即#main-field
)的父元素上指定font-size:0
,然后在inline-block
元素本身上重新指定字体大小。
看到你是如何给你的元素一个固定的宽度,那么你可能根本不需要这个破解,应该只使用float:left
和display:block
。