首先这里的div设置为了行内块元素，span本身为行内元素，并且设置了* {padding: 0; margin: 0;}，那怎么清除元素之间的空白缝隙呢？？
（1）给元素加浮动
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.parent {
width: 200px;
height: 100px;
margin-top:20px;
margin-left:20px;
border: 1px solid #000;
}
.parent div {
width: 50px;
height: 50px;
display: inline-block;
float:left;
}
.parent div:nth-child(1) {
background-color: pink;
} .parent div:nth-child(2) {
background-color: skyblue;
} .parent div:nth-child(3) {
background-color: yellow;
}
.span_parent {
border: 1px solid #000;
margin-left:20px;
width: 200px;
height: 100px;
margin-top:20px; }
.span_parent span {
float: left;
}
.span_parent span:nth-child(1) {
background-color: pink;
}
.span_parent span:nth-child(2) {
background-color: skyblue;
}
.span_parent span:nth-child(3) {
background-color: yellow;
}
</style>
</head> <body>
<!-- position:absolute或position:fixed -->
<div class="parent">
<div>div1</div>
<div>div2</div>
<div>div3</div>
</div> <div class="span_parent">
<span>span1</span>
<span>span2</span>
<span>span3</span>
</div> </body> </html>
（2）把所有的元素标签都写到一行上
<body>
<div class="parent">
<div>div1</div><div>div2</div><div>div3</div>
</div> <div class="span_parent">
<span>span1</span><span>span2</span><span>span3</span>
</div>
</body>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.parent {
width: 200px;
height: 100px;
margin-top:20px;
margin-left:20px;
border: 1px solid #000;
}
.parent div {
width: 50px;
height: 50px;
display: inline-block;
/* float:left; */
}
.parent div:nth-child(1) {
background-color: pink;
} .parent div:nth-child(2) {
background-color: skyblue;
} .parent div:nth-child(3) {
background-color: yellow;
}
.span_parent {
border: 1px solid #000;
margin-left:20px;
width: 200px;
height: 100px;
margin-top:20px; }
.span_parent span {
/* float: left; */
}
.span_parent span:nth-child(1) {
background-color: pink;
}
.span_parent span:nth-child(2) {
background-color: skyblue;
}
.span_parent span:nth-child(3) {
background-color: yellow;
}
</style>
</head> <body>
<!-- position:absolute或position:fixed -->
<div class="parent">
<div>div1</div><div>div2</div><div>div3</div>
</div> <div class="span_parent">
<span>span1</span><span>span2</span><span>span3</span>
</div> </body> </html>
（3）给其父元素加入“font-size:0px;”
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.parent {
width: 200px;
height: 100px;
margin-top:20px;
margin-left:20px;
border: 1px solid #000;
font-size:0px;
}
.parent div {
width: 50px;
height: 50px;
display: inline-block;
font-size:14px;
/* float:left; */
}
.parent div:nth-child(1) {
background-color: pink;
} .parent div:nth-child(2) {
background-color: skyblue;
} .parent div:nth-child(3) {
background-color: yellow;
}
.span_parent {
border: 1px solid #000;
margin-left:20px;
width: 200px;
height: 100px;
margin-top:20px;
font-size:0px; }
.span_parent span {
/* float: left; */
font-size:14px;
}
.span_parent span:nth-child(1) {
background-color: pink;
}
.span_parent span:nth-child(2) {
background-color: skyblue;
}
.span_parent span:nth-child(3) {
background-color: yellow;
}
</style>
</head> <body>
<div class="parent">
<div>div1</div>
<div>div2</div>
<div>div3</div>
</div> <div class="span_parent">
<span>span1</span>
<span>span2</span>
<span>span3</span>
</div>
</body> </html>
