<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框距</title>
<style type="text/css">
div{
border: 1px solid red;
width: 100px;
height: 100px;
}
/*1.四个边设置相同的边距*/
#d1{
padding: 20px;
margin: 30px;
}
/*2.四个边设置不同的边距*/
#d2{
padding: 10px 20px 30px 40px;
margin: 10px 20px 30px 40px;
}
/*3.单个边设置边距*/
#d3{
padding-left: 20px;
margin-bottom: 30px;
}
/*4.对边设置相同的边距*/
#d4{
padding: 10px 20px;
margin: 30px 40px;
}
/*5.对边设置边距的特例 设置外边距时，若左右外边距值为auto，则该元素水平居中*/
#d5{
margin: 20px auto;x
}
</style>
</head>
<body>
<div id="d0">d0</div>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
<div id="d5">d5</div>
</body>
</html>