发现Bug
今天在做flex布局的时候,我在父元素中引入了四个行内元素span,想测试flex的相关属性,代码如下所示。我本来是想在box这个盒子中放四个span,因为按理说应该正好放下四个span,但实际效果却不是这样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 400px;
height: 200px;
background-color: yellow;
}
.item {
width: 100px;
height: 40px;
background-color: red;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
</div>
</body>
</html>
分析Bug
经过查阅资料得知,出现空白间隙,导致最后一个span无法放在第一行。那么为什么会有这个空白间隙呢?到底是哪里来的呢?
出现空白间隙的原因是,元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化,当行内元素font-size:16px时,间距为8px。
解决Bug
- 去除元素间的空白
通过将上一个元素的闭合标签与下一个元素的开始标签写在同一行,可以去除元素间的空白,或者将两个inline-block元素间加上空白注释,或者不写元素的闭合标签等,例如这么写:
<body>
<div class="box">
<span class="item">1</span><span class="item">2</span><span class="item">3</span><span class="item">4</span>
</div>
</body>
- 父元素设置font-size为0,子元素单独设置font-size
.box {
width: 400px;
height: 200px;
background-color: yellow;
font-size: 0;
}
.item {
font-size: 15px;
width: 100px;
height: 40px;
background-color: red;
display: inline-block;
}
- 设置margin-left为负值
用margin负值来抵掉元素间的空白,不过margin负值的大小与上下文的字体和文字大小相关,并且同一大小的字体,元素之间的间距在不同浏览器下是不一样的,如:font-size:16px时,Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以这个方法并不通用,也相对比较麻烦,因此不太推荐使用。
- 给inline-block元素加float或者flex
让行内块元素浮动起来,或者给父盒子加上display: flex; 都可以解决空白间隙的问题,不过这样处理的三栏式布局也就没必要用inline-block啦。
- 设置字符间距或单词间距
这两个方法的原理有点像二所用的font-size,具体做法是给父元素一个letter-spacing或者word-spacing的负值,子元素再调整为0即可,具体使用字符间距还是单词间距其实大同小异。
.box {
width: 400px;
height: 200px;
background-color: yellow;
letter-spacing: -0.5em;
/* word-spacing: -0.5em; */
}
.item {
letter-spacing: 0;
/* word-spacing: 0 */
width: 100px;
height: 40px;
background-color: red;
display: inline-block;
}