CSS basic tutorial: padding and margin properties

CSS padding properties: the distance between the border line and the content

Note: What we usually call the width and height properties, they Refers to the width and height of the content, excluding inner and outer margins and border lines.

• padding-left: left inner padding distance, the distance between the left line and the content.

• padding-right: the right inner padding distance, the distance between the right line and the content.

• padding-top: top inner padding distance, the distance between the top edge and the content.

• padding-bottom: the distance between the bottom padding and the bottom line to the content.

• Abbreviated form

• padding:10px; //The inner padding on the four sides is 10px

• padding:10px 20px; //10px for top and bottom, 20px for left and right

• ##padding:5px 10px 20px; //5px for top and 10px for left and right , the bottom is 20px

• padding:5px 10px 15px 20px; //The order must be "top, right, bottom, left"

      
  
互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。 
  

CSS margin property: the distance outward from the edge

##margin- left: the distance outward from the left line.
margin-right: The distance outward from the right line
margin-top: The distance outward from the upper edge line.
margin-bottom: The distance outward from the bottom line.
Abbreviated form

• margin:10px 20px //Top and bottom margins 10px, left and right margins 20px

• margin:5px 10px 15px; //Top and bottom margins 5px, left and right margins 10px, bottom margin 15px

• margin:5px 10px 15px 20px; //The order must be "top, right, bottom, left"

•       
    
  互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。 
    

Note: padding and margin are easy to confuse, please carefully observe the difference in the output of the two examples