当我使用带有属性的元素时,inline-block
我在元素之间得到一个空格:
html, body { margin: 0; padding: 0; }
.padre .hijo {
display: inline-block;
padding: 5px;
background-color: red;
}
<div class="padre">
<div class="hijo">Hijo 1</div>
<div class="hijo">Hijo 2</div>
<div class="hijo">Hijo 3</div>
</div>
为什么会发生这种情况,有没有办法消除这种影响?
空间的行为是
inline
和元素的一部分inline-block
。默认情况下,属性和(参见属性索引
inline
)应用于元素,这取决于它们从父元素继承的大小,并且由于元素分别位于每一行,因此在渲染时会生成一个空白(显示为:letter-spacing
word-spacing
font-size
DOM
_
我们现在将看到许多解决方案,您可以针对该问题提供以消除
DOM
或 中的规则的空格CSS
:#1。删除元素之间的空格:
CSS
#二。添加评论(空):
CSS
#3。我们将字体大小
font-size
设置为零DOM
CSS
#4。安排
white-space
与margin
DOM
CSS
#5。我们减去
letter-spacing
DOM
CSS
#6。
flex
在家里(感谢现代浏览器)DOM
CSS
资料来源:
display: inline-block
你可以这样替换float:left
: