问题描述

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

布局一些元素时，周围会有一个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;
}

© 版权声明

文章版权归作者所有，未经允许请勿转载.
本站资源多数存于云盘，如有失效请邮件联系我.
本网站的文章部分内容可能来源于网络，如有侵权，请联系884684993#qq.com进行删除处理.