多个div使用display:inline-block时候div之间有间隔
这个问题让我很是困惑,直到查询了好多个文章,才明白是怎么回事!!!
如图1:两个inline-block的盒子中间有空隙,
如图2:当两个并排的盒子宽度都是40px,外边的大盒子宽度设置为80px时,两个盒子就不会排列在一排,
图1 图2
解决方法1:在父系上加font-size:0;然后,在子div上加一个font-size设置你需要的字体大小
原因:
display:inline-block表示行内块元素,后面自带空格字符(盒子的
之间的空格和回车折算成了字符),所以有空隙,如果想去掉空隙,在父系上加font-size:0;但是这样的话字体就看不见了,所以还需要在子div上加一个font-size
代码如下:
<style>
.container{
width: 80px;
background-color: aqua;
font-size: 0;
}
.div1{
display: inline-block;
width: 40px;
background-color: blue;
font-size: 19px;
}
.div2{
display: inline-block;
width: 40px;
background-color: brown;
font-size: 19px;
}
</style>
<body>
<div class="container">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
</body>
父级字体大小为0,两个子级字体大小相同,此时确实是可以实现并排显示,但是当两个子级字体大小不同时,会出现如下情况:
出现这种错位的原因,其实是因为我们编写css所使用的编辑器,给每一个元素都添加了一个默认的vertical-align:baseline;属性;baseline是基线对齐的意思,基线即我们所写的文本文档的最后一行文字的底线,比如蓝色盒子的基线就是“1”的底线,而棕色盒子的基线就是“2”的底线,从图中我们可以很明显的看到,这两条线是对齐了的,这就是导致错位的原因。
要解决这个问题其实也很简单,只需要将vertical-align的值改为top、middle等其他的值就可以了。
解决方法2:
给父盒子加上 display:flex;设置为弹性盒子,
弹性盒子中的子级块级元素会并排显示。(这个应该不用解释了吧)
以上均为个人体会,如若内容有误,欢迎提出。