1.行内元素、行内块元素之间的空白
对于span、input等行内及行内块元素,多个元素可以在同一行呈现,但有时会在不同的元素之间产生空白间隙,主要原因是不同的元素之间存在换行,被识别成了空格,可以通过删除换行(不推荐)、父元素设置字体大小为0(推荐,子元素需单独设置fontSize,否则文字内容不可见)
<div>
<span>123</span>
<span>234</span>
</div>
// 解决方法1
<div>
<span>123</span><span>234</span>
</div>
// 解决方法2
<div style="font-size: 0;">
<span style="font-size: 16px;">123</span>
<span style="font-size: 16px;">234</span>
</div>
2.行内块的幽灵空白问题
行内块元素的底部存在空白,如下图所示img的下方存在一条空白的缝隙,该缝隙是由行内块元素与文字基线对齐产生的,而基线并不在文字的最底部
<div>
<img src="./src/assets/th.jpg"/>g
</div>
// 解决方法1
img {
vertical-align: bottom; // top middle都生效,除了默认的baseline
}
// 解决方法2
div {
font-size: 0; // 此时需要将文字用额外的元素单独包裹,并给该元素单独设置font-size
}
// 解决方法3
img {
display: block; // 布局产生影响
}
3.margin塌陷问题
margin的塌陷主要存在于以下两种场景:
- 父元素的第一个子元素添加margin-top,那么会产生父元素夺走了子元素margin-top的效果
- 父元素的最后一个子元素添加margin-bottom,那么会产生父元素夺走了子元素margin-bottom的效果
.parent {
.child1 {
height: 100px;
width: 100px;
margin-top: 20px; // margin塌陷
background: red;
}
.child2 {
height: 100px;
width: 100px;
margin-bottom: 20px; // margin塌陷
background: blue;
}
}
<span>顶部测试文字</span>
<div class='parent'>
<div class='child1'></div>
<div class='child12'></div>
</div>
<span>底部测试文字</span>
解决方法:
- 父元素添加不为0的边框border
- 父元素添加不为0的内边距padding
- 父元素设置css样式overflow: hidden
4.行内元素的上下padding
对于行内元素如span的上下padding设置会产生遮挡的效果,如下图所示,设置了上下padding的span遮挡了上下方的div,类似于不占位置的效果,而左右的padding显示正常
span {
background: orange;
padding-left: 20px;
padding: 20px;
border: 1px solid black;
}
div {
height: 200px;
width: 500px;
background: red;
}
<div></div>
<span>span left</span><span>span center</span><span>span right</span>
<div></div>