Some questions about margin

Cited

In the process of dealing with styles in peacetime, there are various problems. Like what:

• The child elements contained in the parent element are set to float, and the height of the parent element does not change with the height of the child, but the parent element is still the height of the original setting.
• A child element that is contained in a parent element, where the height of the child element is not set, but rather by its own margin value to set its own width height according to the parent element's size, but actually the top margin overlaps with the parent element
• The element is clearly set to block level, but the definition height is always not the desired height.
• is separated from the adjacent elements by margin, but the value of margin is actually different from the set.
• In a low-version browser (ie6,7), the block element is set to Inline-block

Box model

The questions mentioned above are basically related to the box model in CSS.

source:w3c

Width of the box

= Margin-left + margin-right + border-left + border-right + padding-left + padding-right + width

The height of the box

= margin-top + Margin-bottom + border-top +border-bottom + padding-top + padding-bottom + height

Attention:

• Margin is transparent without color, border default with text color always, padding color with element's back color.
• The vertical properties of margin, that is, Margin-top, Margin-bottom, do not work in the elements of inline. Margin can have negative values.
• The Padding property works in both inline and block elements, but padding does not have a negative value.

margin outer margin

Here in box.html, where inner and Outer1 's margin-top, margin-right overlap, that is, the child element and the margin of the parent element overlap The margin-bottom of the Outer1 and the margin-top of outer2 overlap, that is, the margin of the adjacent element overlaps.

Standard

That's what the standard in css2.1 says (enter here)

"In CSS, the adjoining margins of both or more boxes (which might or might is siblings) can combine to form a single m Argin. Margins that combine this-is-said to collapse, and the resulting-combined margin is called a collapsed margin. "

In CSS, two or more (possibly peers or descendants) the margins of the adjacent box overlap to form a single margin. The way the margins are generated in this way is called collapsing (superimposed), and the resulting margin is called the Collapse (overlay) margin.

A situation in which there is no overlap in the standard

There will never be overlap in the horizontal direction.

In the vertical direction, no overlap occurs in the following situations:

• The margin of the root element does not overlap
• If an element with "void clearance" (that is, a value other than Clear:none) is adjacent to the upper and lower margins, its margins overlap with adjacent elements, but the resulting overlap will no longer overlap with the bottom margin of the parent element.

What is void clearance?

* (Clear ' s) values other than ' none ' potentially introduce clearance. (Clear except for none can create voids)

* Clearanceinhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float. (Voids suppress margin collapses and exhibit a gap at the top of the margin.) This is used to float the element vertically)

Overlap in the standard.

What are the two margins adjacent to each other (that is, how does overlap occur)?

• A block-level box that is in the same block-level format context as a normal stream . (These two elements are block-level boxes that are not out of normal flow and are in the same block-level formatting context.) ）
• Two elements without a line box, no clearance, no padding and borders
• Each of the two elements is bordered by a vertical edge, which meets one of the following conditions
  • The top margin of the box (Margin-top), and its first top margin (margin-top) in the normal flow child element
  • The bottom margin of the box (Margin-bottom), and the top margin of its next sibling element in normal flow (margin-top)
  • Bottom margin (margin-bottom) of the last element in the normal flow , and the bottom margin of the parent element whose height is auto (margin-bottom)
  • There is no trigger block-level format context, Min-height is 0, or height is auto, and there are no margin-top of boxes in the normal stream of child elements, and Margin-bottom

The so-called outer margin collapses, is adjacent to the other margin, as long as the four outer margin of any one can.

Note: The margin collapse occurs on any element, not just sibling elements or ancestral elements.

The above rules mean (that is, specific rules):

• The outer margin of the floating box and any other box does not overlap (even if it is a floating element with its normal stream child elements).
• An element with a block-level format context, such as an element other than the overflow:visiable value, does not have a margin overlay with its child elements that are in normal flow.
• The outer margin of the box with absolute positioning does not overlap. (as well as their normal flow sub-elements)
• Margin overlays do not occur in inline block-level (inline-block) boxes. (and their normal stream child elements).
• The bottom margin (margin-bottom) of a block-level element in normal flow is always superimposed on the top margin (margin-top) of the block-level element of his next sibling's normal flow, unless the sibling element has a gap (clearance).
• The margin-top of the normal flow block level element is superimposed on the margin-top of its first normal stream block level child element, if the element has no border-top, no padding-top, and its child elements have no gaps (clearance).
• A block-level box of normal flow if Height:auto or min-height:0, his margin-bottom will overlap with the margin-bottom of the last normal flow element, If the box does not have Padding-bottom or border-bottom, and the margin-bottom of the child element is not superimposed with the margin-top of the Void (clearance).
• A box if min-height:0, there is no border-top or border-bottom, there is no padding-top or padding-bottom, and there is no Line box, and height:0 Or Height:auto, then his margin is superimposed, and the margins of all normal flow sub-elements are superimposed.

If an outer margin overlay occurs, the value of the resulting margin is the largest of the two margins. If there is a negative margin, then the value is the sum of the maximum positive margin with the largest negative margin. If there is no positive margin, then the absolute value is the maximum minus 0.

Demo does not overlap the case

The previous translation of the various situations in css2.1 about margin overlap. But most of the actual work, in order to better more accurate layout, we generally want to avoid the margin overlap. As mentioned earlier, margin in the horizontal direction will never overlap, so let's look at how to avoid overlapping margins in the next step.

The outer margin of the floating box and any other box does not overlap (even if it is a floating element with its normal stream child elements).

Reference Demo1, Demo2

In Demo1, outer floats, inner is a sub-element of Outer's in-flow (normal document flow), so outer margin does not overlap with inner margin.

In Demo2, Outer,outer2 are set to float, triggering BFC, so the margins of outer and outer2 do not overlap.

Floating is in fact out of the normal flow of the document , the overlap of the three conditions are triggered in the normal flow of the document, so the float is sure not to occur margin overlap.

? An element with a block-level format context (BFC), such as an element other than the overflow:visiable value, does not have a margin overlay with its child elements that are in normal flow.

The block-level format context (block formatting context, hereinafter referred to as BFC) is described in css2.1 and is described in CSS3 as flow root. Floating elements and position in addition to relative and static values, block-level containers (such as Inline-blocks, Table-cells, and table-captions) of non-block-level boxes and overflow in addition to the visible value, will trigger BFC, and other subsequent detailed analysis.

Refer to outer and inner in demo1. Outer triggers the BFC, so there is no overlap between the margins inner the child elements.

? the outer margin of the box with absolute positioning does not overlap. (as well as their normal flow sub-elements)

refer to Demo3.

absolute positioning is also out of the normal flow of documents, as with the floating, contrary to the trigger margin overlap conditions, so absolute positioning is certainly not to occur outside the margin overlap.

? margin overlays do not occur in inline block-level (inline-block) boxes. (and their normal stream child elements).

refer to Demo4.

Here's a question that contains a block element in the Inline-block, and then why not align it at the top and align it to the center of the text? We'll discuss it later.

? if an element with "void clearance" (that is, a value other than Clear:none) is adjacent to the upper and lower margins, its margins overlap with adjacent elements, but the resulting overlap will no longer overlap with the bottom margin of the parent element.

Reference Demo5

situations where overlap is occurring

If the upper and lower margins of an element with "void clearance" (that is, values other than Clear:none) are adjacent, its margin overlaps with the adjacent element

Reference Demo5

The rest of the day will be mended.

Some questions about margin