Learn more about CSS margins margin elements

Previous words

Margin is a very special attribute in several properties of a box model. Just a few examples: only margin does not show the current element background, only margin can be set to negative values, margin and width support auto, and margin has very strange overlapping characteristics. The previous blog post has described in detail the basic knowledge of margin and the detailed usage of negative margin. This article will detail some of the key parts of margin margins, including overlap, auto, and invalid conditions

Overlapping

Premise

Margin overlap is also called margin merger, this happens there are two prerequisites

1. Only on block elements (excluding float, absolute, inline-block elements)

2, only in the vertical direction (regardless of writing-mode)

Classification

Margin overlap consists of the following 3 cases

1. Adjacent sibling elements

<style>p{    line-height:2em;    Margin:1em 0;    Background-color:lightblue;    Display:inline-block;    width:100%;} </style><p> Brothers one </p><p> Brothers II </p>

2. The parent element and the first or last child element, the parent-child margin overlap is also called the margin Pass

<style>.box{    Background-color:pink;    height:30px;}. inner{    margin-top:1em;    Background-color:lightblue;} </style><p class= "box" >    <p class= "inner" > Children </p></p>

Conditions

Relative to the adjacent sibling element margin overlap, the parent-child margin overlap needs to meet the following conditions (with margin-top overlap as an example):

A, the parent element is not a BFC element

B, parent element has no padding-top value

C, parent element has no border-top value

D, the parent element and the first child element are not delimited by an inline element

If the parent-child margin-bottom overlap, the section D is changed to a parent element and the last child element is not separated by an inline element, and the parent element does not have a height, min-height, max-height limit

3. Empty block Element

<style>.box{    Background-color:lightgreen;    Overflow:hidden;}   . void{    margin:1em 0;} </style>
From the results below, it can be seen that the empty block element should open the parent margin-top+margin-bottom a total of 2em height, but due to margin overlap, only 1em

Similarly, a margin overlap in an empty block element also needs to meet some conditions

A, element has no border value

b, element has no padding value

C, there is no inline element

D, no height or min-height

Rules

Two positive vertical margins, the browser takes a large value, if the vertical margin is set to a negative value, the browser picks up the maximum of two margins, and if a positive margin is combined with a negative margin, the absolute values of the negative margin are subtracted from the positive margin.

Simply put, it is positive to take large values, plus and minus values added, negative negative the most negative


Use

In the layout of the Web page, because of the margin overlap, we often use margin as a "problem style" with minimal effort. But in fact, it's a big part of the

HTML document creation is intended only to display information. HTML documents only use the default style, if the upper and lower margin does not overlap, the following problems occur: 1, consecutive paragraphs or lists and so on, if there is no margin overlap, the gap between the end and the other sibling elements will be 1:2 of the relationship, typesetting is not natural; 2. Nesting or directly placing any bare p anywhere on the web will affect the native layout, contrary to the web design principles; 3, empty any number of P tags, will affect the original reading layout

So, we want to make the best use of overlap, and we can work with both Margin-top and Margin-bottom in list items. This makes the page structure more robust, with the last element removed or position swapped, without destroying the native layout

"New Properties"

-webkit-margin-collapse

-webkit-margin-collapse: <collapse> (default overlap) | <discard> (cancel) | <separate> (Separate)
This property is used to set whether margin overlaps and is used for one of the two elements that occur margin overlap. If, two uses this property, one is set to discard, and one is set to separate, the final effect is overlapping collase


Auto

Only Width/height and margin can set auto. More information about auto has been described in detail in CSS visual formatting. Only the sections on Margin:auto are described below

"Why Margin:auto cannot be vertically centered"

The horizontal direction can be centered because the width of the block-level element defaults to the parent element, if the width is set to a fixed value, and the left and right margin is set to auto, you can split the remaining space

The vertical direction is not centered because the height of the block-level element is the content height by default, not directly related to the height of the parent element, and the up and down margin is set to auto, which is reset to 0

"Why the picture cannot be centered horizontally using Margin:auto"

The picture cannot be centered horizontally, similar to block-level elements that cannot be centered vertically. Because the width of the picture is width by default, it is not directly related to the width of the parent element. Left and right margin set to auto, will be reset to 0

So, to center the picture horizontally, you need to set the Display:block element

"Achieve vertical centering"

There are two ways to use the Margin:auto to achieve vertical centering

1, the use of WRITING-MODE:VERTICAL-LR;

Writing-mode represents the direction of the page flow, which is the horizontal direction by default. Vertical centering is possible, but the horizontal is not centered

2. Change element to absolute positioning element (ie7-browser not supported)

After the element is changed to an absolutely positioned element, the top:0;bottom:0 is set, and the absolute positioning element is directly associated with the height of the anchor parent. Set margin:0 Auto again, so that the margin-top and Margin-bottom divide the remaining space to achieve a vertical center effect.


Invalid case

1, inline element vertical margin invalid

Because inline element vertical layout is primarily influenced by row height line-height and vertical alignment vertical-align, vertical margin does not affect them, so vertical layout is not affected. In the display mode, the margin area does not display the element background, so it does not affect the display of its own elements, so the inline element vertical margin is not valid

[note] Do not include inline-block or setting Writing-mode to VERTICAL-LR

2. Some table class element margin is invalid

  <thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>Cannot set margin. For the display property, display is a table-related type (excluding table-caption, table, inline-table) and the margin declaration is invalid

3. The margin value of the non-locating direction of the absolute positioning element appears invalid

The margin value of absolute positioning is always valid, just because the absolute positioning element is out of the document flow, not related to other element nodes, so the effect is not visible

4, BFC caused by the margin seems invalid

The left element uses a float, and the right element uses Overflow-hidden to implement a two-column adaptive layout, and the Margin-left value of the right element is only large enough to see the effect. This is because Margin-left is relative to the left side of the parent element, not to the right of the picture

5. Invalid margin caused by inline attribute

A p is wrapped in a picture, when the image of the margin-top small to a certain value, the picture will no longer move upward. This is because the picture is an inline element, which is subject to the influence of the inline element vertical-align alignment property. The default baseline alignment. In the case of a page-like uppercase x character, X is not going to go out of the parent element because the picture margin-top is small enough, so the picture moves to a certain position and no longer moves upward.