老师，元素中间的缝隙如何解决？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:0;
padding:0;
color:#fff;
}
.container{
width:100%;
margin:0 auto;
text-align: center;
background:red;
}
.left{
width:20%;
height:1000px;
background:#67b581;
/*float:left;*/
display:inline-block;
}
.right{
width:20%;
height:1000px;
background:#67b581;
/*float:right;*/
display:inline-block;
}
.middle{
width:40%;
height:1000px;
background:#175bb8;
/*float:left;*/
display:inline-block;
}
</style>
</head>
<body>
<div class="container">
<div class="left">这是页面的左侧</div>
<div class="middle">这是页面的中间</div>
<div class="right">这是页面的右侧<div>
</div>
</body>
</html>
正在回答
同学你好， 首先， 我们要清楚为什么会有缝隙， 因为修改display属性为inline-block让元素在一排显示， 由于html结构中div标签存在换行， 浏览器解析的时候将元素之间的换行解析为4px的空白间距， 所以会出现缝隙。
然后， 我们在来想解决办法， 老师这里给同学两种参考的解决方法
1. 给父级元素设置font-size:0; 消除间距， 然后给对应的div重新设置字体大小即可
2. 直接将html结构中div的换行删除了， 在一行写这些标签也是可以的
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星