<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.c1{
width: 249px;
height: 1000px;
background-color: gray;
display: inline-block; }
.c2{
width: 900px;
height: 1000px;
background-color: red;
display: inline-block;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div><!-- 注意观察这里的变化 -->
</body>
</html>
两个div设置行内块属性，内外边距已经设置为0了，但是两个div之间为什么还有间隙呢？修改如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.c1{
width: 249px;
height: 1000px;
background-color: gray;
display: inline-block; }
.c2{
width: 900px;
height: 1000px;
background-color: red;
display: inline-block;
}
</style>
</head>
<body>
<div class="c1"></div><div class="c2"></div><!-- 注意观察这里的变化 -->
</body>
</html>
将body中的连个div设置为一行就可以了。