The CSS margin property controls the outer margins of an element. With it, you can set the distance between adjacent blocks or move the child node from the border of the parent. Margins do not participate in the CSS block model and are not included in the width and height of the element.
Property Syntax
There is a common CSS margin property with which you can specify the value of all indents at once, as well as four separate properties for each side:
- margin-left;
- margin-right;
- margin-top;
- margin-bottom.
You can determine the indent value in pixels, relative units (em, rem) or percent. In the latter case, the width of the parent element will always be taken as 100%, even for the upper and lower sides.
parent { width: 500px; height: 100px; } child { margin-left: 10%; // 500px * 10% = 50px margin-top: 10%; // 500px * 10% = 50px }
In CSS, margin can be negative.
When using group syntax, you must pass from one to four parameters, listing the parties in the correct order.
- One: for all parties at once.
- Two: for the top and bottom and separately for the sides.
- Three: for the top, sides and bottom.
- Four: list the sides clockwise, starting from the top.
element { margin: 20px; } element { margin: 20px 30px; } element { margin: 20px 30px 40px; } element { margin: 20px 30px 40px 50px; }
Indentation Algorithms
The CSS margin property is not inherited and defaults to zero. It would seem that initially no element on the page should have indentation, but this is not so. Browsers on their own initiative establish formatting for a number of tags, for example, lists. It is important to consider this when layout.
The specification defines the features of margin behavior for nodes with a different type of display. So, inline elements ignore the value of upper and lower indentation, even if they are directly specified so as not to violate the structure of the line.
Blocks and string blocks adequately display margins on all four sides, however, in some cases, the behavior of this property may be unexpected.
Collapse of margins
The picture shows two elements located one below the other with established indentation. In the first embodiment, the lower and upper margins of the blocks are combined, in the second - they are added. What type of behavior seems more logical?
Block elements in CSS behave according to the first type, while line-block and flex containers behave according to the second type. In this case, only vertical indents collapse, while horizontal ones always add up.
Removal of margin beyond parent
Block nodes have one more quirk: in some cases, the margin of a child element can be moved outside the parent container. This happens if the indented element is not separated from the border of the ancestor by any means - neither by other elements, nor by a text node, or by a frame, or by padding.
The picture shows a child block that has been indented in the expectation that it will move away from the upper border of the parent container. Instead, the margin was moved outside the parent and moved it away from the border of the older ancestor.
If the parent has a border, padding, or overflow property equal to hidden or scroll, margin removal does not occur.
Center Alignment
There is a well-known trick that allows you to align the block element in the center of the parent using external indents. To do this, you need to set the width and set the left and right margins to auto.
element { width: 400px; margin: 0 auto; }
In this case, the free space is redistributed equally on both sides of the element. This only works for block-type nodes with a specific width. If you do not set the size, the block element is stretched to the entire container, leaving no free space for indentation.