1.内置DIV
.item{
width:210px;height:136px; float:left;
margin:20px;
}
210*136指元素（图）的宽和高，黄色部分为外边距20px
2.外部DIV
#box{
overflow:auto;
width:750px;
/* div居中，水平方向有效 */
margin:auto;
}
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{
/* 将所有元素默认边距设置为0 */
margin: 0;
}
#box{
overflow:auto;
width:750px;
/* div居中，水平方向有效 */
margin:auto;
}
.item{
width:210px;height:136px; float:left;
margin:20px;
}
</style>
</head>
<body>
<div id="box">
<div class="item" style="background: url(imgs/1.jpg);"></div>
<div class="item" style="background: url(imgs/2.jpg);"></div>
<div class="item" style="background: url(imgs/3.jpg);"></div>
</div>
</body>
</html>结果：
3.内边距
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{
/* 将所有元素默认边距设置为0 */
margin: 0;
}
#box{
width:1870px;
overflow:auto;
/* div居中，水平方向有效 */
margin:auto;
}
.item{
float:left;
margin:20px;
border:5px solid black;
padding:15px;
}
</style>
</head>
<body>
<div id="box">
<div class="item" >
<img src="imgs/1.jpg" alt="" >
<br>
测试文字内容
</div>
<div class="item" >
<img src="imgs/2.jpg" alt="">
<br>
测试文字内容
</div>
<div class="item" >
<img src="imgs/4.jpg" alt=""><br>
测试文字内容
</div>
</div>
</body>
</html>结果：
