The distance between elements and other elements can be set using margin. The boundaries can also be divided into upper, right, lower and left. The following code:
div{margin:20px 10px 15px 30px;} can also be written separately:
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
} If the upper, right, lower and left borders are both 10px; you can write like this:
div{ margin:10px;}If the upper and lower borders are The same is 10px, and the left and right are the same 20px. You can write it like this:
div{ margin:10px 20px;} To summarize: the difference between padding and margin, padding is in the border, and margin is outside the border.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>边距</title>
<style type="text/css">
div{
width:300px;
height:300px;
border:1px solid red;
}
#box1{margin-bottom:30px;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>
Next Section