问题描述:三个div,变成行内块(display:inline-block)之后,div之间会产生空隙;如图所示:
产生的原因:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小div在大div中居中的方法</title>
<style>
.parent {
width:600px;
height:200px;
border:2px solid #000;
/*font-size: 0;*/
}
.child {
width:150px;
height:100px;
margin: auto;
display: inline-block;
}
.parent>div:nth-child(1){
background: red;
}
.parent>div:nth-child(2){
background: blue;
}
.parent>div:nth-child(3){
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
浏览器解析的时候,会把行内元素(包括行内块元素)之间的回车换行符解析成一定的间隙,间隙的大小跟默认的字体大小设置有关。
解决办法:将其父元素加上font-size:0的属性,这样就不会有间隙了。注意哦,如果有字,就会看不见了。或者下面这种不换行的写法,但是实际开发中是不现实的。
<div class="parent">
<div class="child"></div><div class="child"></div><div class="child"></div>
</div>