css消除inline-block元素之间空隙的方法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 500px;
height: 400px;
background-color: black;
}
.children{
display: inline-block;
width: 25%;height:100%;
}
</style>
</head>
<body>
<div class="parent" style="">
<div class="children" style="background-color: green"></div>
<div class="children" style="background-color: yellow"></div>
<div class="children" style="background-color: pink"></div>
<div class="children" style="background-color: purple"></div>
</div>
</body>
</html>
div之间有间隙
方式一：
修改HTML结构将div改成一行
<div class="children" style="background-color: green"></div><div class="children" style="background-color: yellow"></div><div class="children" style="background-color: pink"></div><div class="children" style="background-color: purple"></div>
方式二：
使用float代替display:inline-block
.children{
/*display: inline-block;*/
float: left;/*代替 display: inline-block;*/
width: 25%;height:100%;
}
方式三
在父元素上添加font-size:0
.parent{
width: 500px;
height: 300px;
background-color: black;
font-size: 0;/*添加此属性*/
}