Box model--border

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.

      
  
box1
 
box2