Margin and padding

First, margin basic grammar and structure

1. Margin syntax
margin:10px
The value of margin is a digital +html unit and can also be auto (auto, adaptive)

2. Application Structure
div{margin:10px}
Set the Div object to a distance of 10px

3. Margin description
Margin is the distance from the outer edge of the Set object, controlling the distance between the block-level elements
The value of margin has three cases, which can be positive integers and negative integers plus units such as px pixels (margin-left:20px), auto attributes (Margin-left:auto Auto), and a percentage (%) value (margin-left:3%).

Margin Extension (single-sided spacing attribute word)
Margin-left The left epitaxial margin of the object (margin-left:5px; Left epitaxial distance 5px)
margin-right object to the right of the epitaxial margin (margin-right:5px; Right epitaxial distance 5px)
margin-top The upper epitaxial margin of the object (margin-top:5px; Upper extension distance 5px)
Margin-bottom The bottom epitaxial margin of the object (margin-bottom:5px; 5px below epitaxial distance)

Second, CSS margin abbreviation shorthand (top, right, bottom, left)

1, only the upper and lower case abbreviations
Original: margin-top:5px; Margin-bottom:6px
Abbreviated as: margin:5px 0 6px 0 or margin:5px auto 6px Auto

2, only left and right case abbreviations
Original: margin-left:5px; Margin-right:6px
Abbreviated as: margin:0 6px 0 5px or margin:auto 6px auto 5px

3, only the three-side case abbreviation
Original: margin-top:5px; margin-bottom:6px; Margin-left:4px
Abbreviation: margin:5px 0 6px 4px or margin:5px auto 6px 4px

4, four-sided same value abbreviation
Original: margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px
Abbreviation: margin:5px;

5, four-sided different value abbreviation
Original: margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px
Abbreviation: margin:5px 8px 6px 7px;

6, four sides of which the upper and lower values and left and right values are the same abbreviation

Up and down the same, about the same original: margin-top:5px; margin-bottom:5px; margin-left:7px; Margin-right:7px
Abbreviation: margin:5px 7px;

three, margin value overlay (merge) problemMargin value more than only Margin-top and Margin-bottom will be merged, Margin-top and Margin-top will merge, the following is a detailed analysis of the margin merger, I hope to help you have been confused ~ Merge margins and BFC

In CSS, the margins of the adjacent two boxes (which may be sibling or ancestor relationships) can be combined into a single margin. This way of merging the margins is known as folding, and thus the outer margin that is combined is called the folded margin.

Result of Folding:

1. When two adjacent margins are positive, the collapsed result is a larger value between them.
2. When two adjacent margins are negative, the collapsed result is a larger value of both absolute values.
3. Two outer margin a positive and negative, the result of folding is the sum of the two.

The necessary condition for folding: margin must be contiguous!

• must be a block-level box in regular document flow (non-float and absolute positioning) and in the same BFC.
• There is no Line box, no gaps (clearance, as described below), no padding and border separate them
• All belong to the vertical direction of the adjacent margin, can be any one of the following conditions
for the elements of the new BFC are not created by themselves.

The above conditions imply the following rules:

• An element that creates a new BFC (for example, a floating element or a ' overflow ' value other than ' visible ') will not collapse with its child elements ' margins
• Floating elements do not collapse with the margins of any element (including their parent and child elements)
• An absolutely positioned element does not collapse with the margins of any element
• The Inline-block element does not collapse with the margin of any element
• The margin-bottom of a regular document flow element and the margin-top of the sibling elements of its next regular document flow will result in folding unless there is a gap between them (clearance).
• The margin-top of a regular document flow element and the margin-top of the child elements of its first regular document flow are collapsed, with the condition that the parent element does not contain padding and border, and the child element does not contain clearance.
• A ' height ' is ' auto ' and ' min-height ' is a regular document flow element of ' 0 ' margin-bottom will collapse with the margin-bottom of the last regular document flow child element, the condition is that the parent element does not contain padding and b Order, the Margin-bottom of the child element is not collapsed with the margin-top containing the clearance.
• A regular document flow element that does not contain border-top, Border-bottom, Padding-top, Padding-bottom, and whose ' height ' is 0 or ' auto ', ' min-height ' is ' 0 ', It also does not contain a box (line box), its own margin-top and Margin-bottom will fold.

(Below we analyze the situation that does not produce folding.) ）

Floating and absolute positioning does not create a margin collapse with any element

cause: floating elements and absolute positioning elements do not create margin folds with other boxes because the element is detached from the current document stream, violating the two margin described above as the adjacency condition, and because Floating and absolute positioning causes the element to create a new BFC for its contents, so the BFC of the element and child elements are not the same, and therefore no margin folds.

DEMO:

cssbody {padding:0;margin:0; text-align:center;}. Wrapper {margin:30px;width:450px;border:1px solid red;}. Small-box {width:50px;height:50px;margin:10px;background: #9cc;}. Middle-box {width:100px;height:100px;margin:20px;background: #99c;}. Big-box {width:120px;height:120px;margin:20px;background: #33e;}. Floatl {float:left;}. Floatr {float:right;}. clear {Clear:both;}. PosA {position:absolute;}. Overhid{overflow:hidden;}. Red {background: #f00;}. Green {background: #0f0;}. Blue {background: #00f;} html<div class=  "wrapper Overhid" > <div Span style= "color: #b58900;" >class=div> < div class= Middle-box green Floatl "> <div class= "Small-box Red" ></div> float left </div></div>               

But the floating element is out of the current BFC and does not affect the sibling elements behind it, and the elements in front of the trailing elements are still in the same BFC, so the margin between them is still folded. Let's make a change to the demo above:

 <div class= "wrapper Overhid" > <div  Class=div> < div class= "Middle-box Green Floatl" >float left</ div> < div class= Middle-box Red ">non-clear</div></DIV>      

As can be seen from the above modified demo, the Red block box in the case of not clearly floating, its margin-top and the blue box of the Margin-bottom produced folding, which proves my conclusions above.

Let's talk about ' clearance ' this magical thing, when the element after the floating element is set to clear to close the relevant direction of the float, according to the rules of the code, the closed floating element will generate a certain gap above its margin-top (clearance, such as), This void prevents the margin-top of the element from collapsing, and it exists as a spacing above the margin-top of the element. The calculation of this spacing is slightly complicated, but you don't need to calculate it in practice, let's take a look at the example:

<Divclass="Wrapper Overhid" > <Divclass="Big-box"style= "box-shadow:0 20px 0 Rgba (0,0,255,0.2); " >non-float</div> <div class= "Middle-box Green Floatl" style=div> < div class= Middle-box red clear "style=div></div>               

As we can see in the above figure, we set the 40px margin-top for the Red block box (where we visualize it with the same height shading) doesn't seem to work on the Purple Block box, and no matter how we modify the Margin-top value doesn't affect the position of the red block, It is only determined by the margin-bottom of the green block box.

In other words, we just need to know that the border-top of the closed floating element will cling to the margin-bottom of the corresponding floating element.

Originally, through the official norms of the world, the closed floating block box on the margin-top generated by the spacing (clearance) value and the margin-top of the block box should be enough to allow the box vertically across the floating element of the Margin-bottom, The border-top of the closed floating block box is adjacent to the margin-bottom of the floating element's block box.

The relevant values in the example can be used to derive such a formula: R-margin-top + r-clearance = g-margin-top + g-height + g-margin-bottom

Ps! Closed float does not allow floating elements to return to the original BFC!

Analysis Two: The margins of inline-block elements and their sibling elements, child elements, and parent elements are not collapsed (including their parent and child elements)

Inline-block does not conform to the specification that the element must be a block-level box condition, because the specification also shows that the Block-level box display property must be one of the following three: ' Block ', ' List-item ', and ' table '

Iv. padding grammatical structure and description

padding : + value + unit or Percentage value

DIV{PADDING:5PX} set object distance from four-sided margin to 5px interval

You can also set left, right, top, and bottom distances separately from the publish settings

Control block-level elements inside

1, Padding-left set the object distance to the left margin filter interval
DIV{PADDING-LEFT:5PX}
5px padding between objects within the distance of the left

2, Padding-right set the object distance to the right margin filter interval
DIV{PADDING-RIGHT:5PX}
The right padding between the objects is 5px

3. Padding-top set the padding interval between the object distance and the top edge
DIV{PADDING-TOP:5PX}
The padding between the objects within the object is 5px

4. Padding-bottom set the padding interval between the object distance and the bottom margin
DIV{PADDING-BOTTOM:5PX}
The padding between the bottom of the object is 5px

Inline object to use this property, you must first set the height or width property of the object, or set the position property to absolute. and the value of padding cannot be negative.

Use padding time notice width increase or decrease, padding is to occupy width and height, if the total width is 500px, left and right set 10px padding style, so the content area width will change to 480px.

Note: When you want the content of two elements to be separated vertically (vertically), you can select either Padding-top/bottom or Margin-top/bottom, and then ruthless It is recommended that you try to use Padding-top/bottom to achieve your goal, because there are collapsing margins (collapsed margins) in the CSS.

Collapsing Margins:margins folding phenomenon exists only in the adjacent or subordinate element, in the vertically oriented margin.

Boundary (margin): An extra white space is generated around the element. "White space" is usually the area where other elements cannot appear and the background of the parent element is visible.

Padding is called the inner margin, which is judged by the distance of the border from the body of the content, and I like the CSS authoritative guide explaining the "filler" (or "white"), because he is very image. Filler (padding): The padding is between the boundary of the element box and the content area. Naturally, the attribute used to affect this area is padding.

Margin and padding