CSS margin properties, in-depth understanding of margin

Margin

<iframe height= ' 265 ' scrolling= ' no ' title= ' margin ' src= '//codepen.io/wmui/embed/zwezeg/?height=265&theme-id =0&default-tab=result&embed-version=2 ' frameborder= ' no ' allowtransparency= ' true ' allowfullscreen= ' true ' Style= ' width:100%; ' >see the Pen margin by Wmui (@wmui) on Codepen.

This property is used to set the margin of the element, the margin is transparent, and the default value is 0. This is a shorthand attribute with a maximum of 4 property values, for example margin: 10px 15px 10px 15px , the top margin, right margin, bottom margin, and left margin, respectively. The property value can also be 3, for example margin: 10px 15px 10px , for the top margin, left and right margins, and bottom margin. The property value can be 2, for example margin: 10px 15px , to indicate the upper and lower margins, left and right margins. The property value can be 1, for example, to represent a four- margin: 10px sided margin. The margin can also be set separately, the top margin, the right margin, the margin-top margin-right margin-bottom bottom margin, and make the margin margin-left . The value of the property can be auto , the browser automatically calculates the margin, block-level elements will be centered horizontally, such as Example 1, as to why the horizontal direction is centered, the vertical direction is not centered, the following detail. The property value can be a percentage, and the percentage is calculated based on the width of the parent element , which is set for the child element in Example 2 margin: 50% . The property value can be a CSS length unit and the value can be negative. The property value can be inherit .

Margin Overlay

Note: In normal document flow, the vertical arrangement of two block-level boxes (non-father and son), their upper margin or the bottom margin will appear superimposed, will be the larger margin between the two, the left and right margins will not overlap.

Case one: The above example 3 and Example 4 demonstrates this phenomenon, example 3 margin: 50px , example 4 margin: 30px , the last two boxes between the distance of 50px, to occur the superposition needs to meet the following conditions:

1. Occurs only in block-level elements and is a normal stream
2. Only in the vertical direction

Case TWO: The above example 2 in the parent-child nested two boxes, the parent element and the first child element or the last child element will also have an overlay effect, in Example 2, the outer margin of the large box is 0, while the inside of the small box on the margin 50% (that is, 100px), the final two boxes of the upper margin is 100px, A parent-child nested box requires the following conditions to occur before the margin overlay occurs:

1. Parent element Non-BFC element
   
2. Parent element has no padding-top value
   
3. Parent element has no border-top value
   
4. There is no inline element interval between the parent element and the first child element

Careful observation found that the lower margin does not occur superimposed, margin-bottom occurrence superposition needs to meet another condition, the above fourth is changed to: the parent element and the last child element is not separated by the inline element, and the parent element does not have height, min-height, Max-height restrictions.

Case three: If a box has no content and no height, the box will also appear in the outer margin overlay, for example:

<div style="margin: 30px 0;"></div>

The upper and lower margins of this box are ultimately 30px, and an empty box will be superimposed if the following conditions are true:

1. No border
2. No padding
3. No content and Height

Margin:auto vertical centering is not possible

Take example 1 to say first, why can achieve horizontal center? This is because the child box is a block-level element, its width by default is equal to the width of the parent box, so there is a link between the child box and the parent box, when the child box fixed width, margin: auto can split the remaining space

In the vertical direction, the initial height of the sub-box is indeterminate, it is open according to the height of the content, so that the parent box and the child box can not be linked, so margin: auto the vertical direction will be reset to 0, the initial height is not equal to the height of the setting.

Margin:auto cannot achieve horizontal center of picture

Similar block-level elements cannot be vertically centered, the width of the image defaults to itself and cannot be associated with the parent box, so the left and right margins are reset to 0. Workaround, give picture settings to display: block fill the picture container with the parent box

Invalid vertical margin in inline element

For inline elements, the arrangement layout in the vertical direction is passed line-height , which affects the vertical-align margin values in the vertical direction, but the horizontal direction is effective. There are also elements such as <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <colgroup> these and table-related elements that set the margin to be invalid

Understanding BFC

EFC (block formatting Content), block-level formatting context, can be easily understood as a block-level box in the page of a piece of rendering area, this area can be regarded as a separate container, the elements inside the container will not affect the outside elements, page layout Common document flow has normal document flow, Three types of floating and locating streams, FC is the normal flow.

BFC Trigger conditions

1. The float value of the element is not none
2. Overflow value is not visible
3. Display values are Inline-block, Table-cell, table-caption
4. Position value is absolute, fixed

Satisfying any of the above conditions can trigger BFC

The role of BFC

<iframe height= ' 265 ' scrolling= ' no ' title= ' BFC ' src= '//codepen.io/wmui/embed/bvoqzj/?height=265&theme-id=0 &default-tab=result&embed-version=2 ' frameborder= ' no ' allowtransparency= ' true ' allowfullscreen= ' true ' Style= ' width:100%; ' >see the Pen BFC by Wmui (@wmui) on Codepen.

Action 1: Trigger the BFC of the element so that the element is not overwritten by a floating element

In Example 1, the yellow box floats, causing the red box to be covered in the normal flow, and the yellow box will not cover the red box as long as the BFC of the red box is triggered.

Role 2: Contains floating elements

In Example 2, the Red parent box is in the normal flow, the yellow box floats, the parent box cannot surround the child box, triggers the parent box's BFC, and the parent box surrounds the child box

Role 3: Prevent margin overlays

In Example 3 is a common margin overlay, triggering the BFC of either box to prevent margin overlays, but not only trigger BFC to prevent overlays.

There is a situation that is special, when using overflow: hidden block overlays, you need to set this property for the parent element of the child box, for example:

<div style="margin-bottom: 20px;">TEST</div><div style="overflow: hidden">  <div style="margin-bottom: 20px;">TEST</div></div>

Prevent margin Overlays

In addition to triggering BFC can prevent margin overlay, there are other methods, said that the trigger margin overlay needs to meet some conditions, I just violate those conditions can naturally prevent the margin overlay. For parent-child nested overlays, I can either set border or padding for the parents, add an inline element as the first child element (which must have content), and trigger the BFC of the child or parent element. For non-parent-child nested margin overlay, this is actually a normal layout effect, if you want to block the overlay, then trigger BFC, set border or padding cannot prevent it from stacking, only trigger BFC

CSS margin properties, in-depth understanding of margin