标签之间的空白间距

问题描述

前端写页面时往往会遇到一个问题

布局一些元素时，周围会有一个4px左右的空白间隙，这个间隙往往会对页面产生许多影响

问题产生原因

当元素是行内或行内块元素时，元素之间的空格，回车，换行等等，都会被浏览器引擎处理

查阅文档发现，产生这个问题的原因是因为white-space，该属性默认值是normal，normal默认会将连续的空白符会被合并，换行符会被当作空白符来处理。所以元素之间就产生了空隙，间隙会随着字体的大小而变化，当大小为16px时，在Chrome浏览器中该间隙为8px左右，这个空白间隙不仅会在img标签上出现，在所有的带有inline属性的元素上都会出现，例如inline，inline-block都会出现

解析方案

解决方法有很多，根据实际情况使用即可

初始结构

<div class="box">
	<img src="images/1.jpg" />
	<img src="images/1.jpg" />
</div>

.box {
	background-color: gray;
}

方法1

标签之间不换行

只能解决左右间隙，不能解决底部间隙

<div class="box">
	<img src="images/1.jpg" /><img src="images/1.jpg" />
</div>

方法2

设置垂直对齐方向

只能解决底部间隙，不能解决中间间隙

.box img{
    /* middle|top|bottom都可以 */
    vertical-align: top;
}

方法3

给父级设置font-size: 0;

中间和底部间隙都能解决

.box {
    background-color: gray;
    font-size: 0;
}

方法4

浮动

中间和底部间隙都能解决

.box::after {
	content: "";
	display: block;
	clear: both;
}
.box img {
	float: left;
}

方法5

设置父盒子为flex布局

.box {
	display: flex;
}