What does CSS margin do?

First of all, we need to know what margin means. The margin attribute is the abbreviation attribute of CSS for setting all margin attributes in one statement. It is an attribute used to control the distance between each element. They are transparent and invisible.

The margin attribute includes margin left: the distance from the left element block (set the distance from the left inner margin ); margin top: the distance from the top (top) element block (set the distance from the top element block) distance); margin right: distance from the right element block (set the block distance from the right element); margin bottom: distance from the bottom element block (set the distance from the lower (lower) element block). Its two-dimensional construction diagram can be seen in the CSS attribute two-dimensional diagram.

margin left usage: margin-left:10px; This means 10 pixels from the left element block, which can be followed by a percentage such as (margin-left:10%; 10% from the left element block) distance) css margin-left tutorial;

margin right usage: margin-right:10px; This means that the block distance from the right element is 10 pixels, which can be followed by a percentage such as (margin-right: 10%; 10% of the distance from the right element block);

margin top usage: margin-top:10px; This means 10 pixels from the top element block, which can be followed by the percentage, such as (margin-top:10%; 10% distance from the top element block) css margin-top;

margin bottom usage: margin-bottom:10px; This means distance from the lower edge The element block distance is 10 pixels, which can be followed by a percentage such as (margin-bottom:10%; 10% distance from the bottom element block) css margin-bottom;

Pay attention to the link "-" in the middle of the margin, set Use " : " to assign a distance value, end with " ; ", and use all lowercase half-width letters.

If you need to set the margin value for both the left and right sides, you can do it in abbreviation to optimize css.

For example, the abbreviation is:

margin:10px; It means that the distance between the top, bottom, left and right element blocks is 10px (10 pixels), which is equal to margin-top:10px; margin-bottom:10px; margin-left :10px; margin-right:10px; abbreviation for the same effect;

margin:5px 10px; meaning that the distance between the upper and lower element blocks is 5px, and the distance between the left and right element blocks is 10px, which is equal to margin-top:5px; margin-bottom :5px; margin-left:10px; margin-right:10px; Abbreviation for the same effect;

margin:5px 6px 7px; meaning the distance between the upper element block is 5px, the distance between the lower element block is 7PX, and the distance between the left and right element blocks is 6px, equal to margin-top:5px; margin-bottom:7px; margin-left:6px; margin-right:6px; abbreviation for the same effect;

margin:5px 6px 7px 8px; meaning the element block is 5px , the distance between the right element block is 6px, the distance between the lower element block is 7px, and the distance between the left element block is 8px, which is equal to margin-top:5px; margin-right:6px; margin-bottom:7px; margin-right:8px; abbreviation for the same effect ;

There are so many ways to use the margin attribute of CSS. Friends who need it can save it. Please also continue to pay attention to other updates on this site.

Related reading:

CSS3 tips for drawing various basic graphics

html and css Tutorial on making QQ Penguin

Do you understand these css principles?

The above is the detailed content of What does CSS margin do?. For more information, please follow other related articles on the PHP Chinese website!