CSS margin properties and usage tutorials

The margin property is a shorthand property used by CSS to set all the margin properties in a declaration, margin is the distance between CSS control block-level elements, and they are invisible to each other.

The margin property contains margin left : The distance from the right element block (set from the left inner margin),margin top: The distance from the top (upper) element block (sets the distance from the element block at the front); margin Right: The distance from the left element block (set the distance from the right element);margin Bottom : The base element block distance (set the spacing low (bottom) element block spacing). The second dimension diagram shows a two-dimensional graph of CSS properties.

Anatomical map of margin

margin left usage: margin-left:10px;  This means that the distance is 10 pixels from the element block , Can be followed by a percentage such as (margin-left:10%;   distance from left element block 10%) CSS margin-left tutorial;
margin Right usage: margin-right:10px; This meaning distance right edge element block distance 10 pixels, can follow the percentage such as (margin-right:10%; The distance from the right edge element block 10%);
margin Top usage: margin-top:10px; distance Top Edge element block Distance 10 pixels, can be followed by a percentage such as (margin-top:10%; Distance from Top edge element block 10%) CSS margin-top;
margin Bottom usage: margin-bottom:10px; this means distance The low edge element is 10 pixels away and can be followed by a percentage such as (margin-bottom:10%; Distance from Bottom edge element block 10%) CSS Margin-bottom;
note Margin in the middle of the link "  -  ", set the distance value with "  :  " and assign a value to "  ;   ends with lowercase half-width letters .

If you need to set the value of margin on the left and right, you can use shorthand to optimize the CSS.
The short way is as follows:
margin:10px; It means that the distance between the upper and lower elements is 10px (10 pixels) equals margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px; same effect shorthand;
margin:5px 10px; Meaning the block distance is 5px, the element block distance is 10px, equal to margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; same effect shorthand;
margin:5px 6px 7px; The meaning of the element block distance 5px, the next element block distance is 7PX, the left and right element block distance is 6px, equals margin-top:5px; margin-bottom:7px; margin-left:6px; margin-right:6px; same effect shorthand;
margin:5px 6px 7px 8px; The meaning of the element block is 5px, the right element block distance is 6px, the next element block distance is 7px, the left element block distance 8px, equals equal to margin-top:5px; margin-right:6px; margin-bottom:7px; margin-right:8px; same effect shorthand;

of which margin:5px 6px 7px 8px; The method of rotation is clockwise , that is, figure:

Attribute-to-method plot of margin

This is the attribute and usage of the margin summarized by the Div CSS Web site. Where margin is used in the same way as padding.

If you want to reprint, please indicate the source and origin of the article URL: http://www.divcss5.com/shili/s6.shtml

CSS margin properties and usage tutorials