例如:我们要使用行内块完成一个横向排版
代码执行如下:
<head>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 320px;
height: 310px;
line-height: 50px;
border: 3px solid red;
margin: 20px auto;
}
.div1,.div2,.div3{
width: 100px;
height: 50px;
border: 1px solid black;
display: inline-block;
font-size: 16px;
vertical-align: top;
}
</style>
</head>
<body>
<div class='box'>
<div class='div1'></div>
<div class='div2'></div>
<div class='div3'></div>
</div>
</body>
执行结果如图所示,每个元素之间存在一定的缝隙
产生原因:
元素被当成行内元素排版时,元素之间的空白符(空格、回车)都会被浏览器处理,回车符会转化为一个空白符
解决方案:
1、将并排的代码放到一行处理 例:<div></div><div></div>
2、给父元素设置font-size:0;
3、浮动 float
4、定位 position
<head>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 320px;
height: 310px;
line-height: 50px;
border: 3px solid red;
margin: 20px auto;
font-size:0;
}
.div1,.div2,.div3{
width: 100px;
height: 50px;
border: 1px solid black;
display: inline-block;
font-size: 16px;
vertical-align: top;
}
</style>
</head>
<body>
<div class='box'>
<div class='div1'></div>
<div class='div2'></div>
<div class='div3'></div>
</div>
</body>
完美解决