CSS margin properties and usage examples

 The CSS margin property is used to define the outer boundary distance of an area (such as DIV or span ), commonly known as the outer distance, which is just different from the commonly used padding (inner distance). Margin allows you to set the outer margins of four sides at once, or you can set different margins for each side separately, especially the margin can be set to a negative value.

Grammar example

Margin: top right, bottom left; margin: top, bottom, left, 　and right; 　margin: top, left, right, bottom; 　margin: the same value on all four sides;

In the first example, we set different values ​​on the four sides, in order of upper right, lower left, and each value must be separated by a blank. In the second example, we set two values, and the upper and lower margins will be the same. The left and right margins will be the same. In the third example, we gave three values, namely the top margin, the left and right margins, and the bottom margin, so that the left and right margins will be the same. In the fourth example, we only I gave a value so that the outer margins representing the four sides are the same, which is a relatively short way of writing.

CSS margin practical example

<div style="width:130px;height:130px;background-color:#D4E6F8;">
　<div style="background-color:#FFC991;width:80px;height:80px;margin:5px 10px 15px 20px"> </div>
</div>

This way of writing means that the top margin is 5px, the right margin is 10px, the bottom margin is 15px and the left margin is 20px. The result is shown below

　

The orange area in this example is the area we want to set. The outer distances of the four sides are set through margins, so the distance between each side is different. The background-color in the example is the background color, and the width and height are It sets the width and height of the DIV block.

Independent writing of the four sides of CSS margin

• margin-top: the distance from the upper element
• margin-right: the distance to the right element
• margin-bottom: the distance from the element below
• margin-left: the distance from the left element

Each of the above unilaterals can be used alone or mixed.

The possible values ​​of margin are auto, length unit and %. The application range of various values ​​may not be the same

• margin:auto; //It means let the browser set it by itself.
• margin: length unit; //is for numbers and units, the unit can be em, px, pt, etc.
• margin:%; //Let the browser set it by itself, which is related to the border element.