Deep analysis and summary of margin characteristics

Today wrote a small demo, the overall is not difficult, but some details need to note:

1) as shown in the Blue area is white box padding, orange area for each data item Margin-bottom, then how to solve the last record Margin-bottom placeholder problem?

2) as shown, set the outer box border to 1px, set the border-bottom of each row to 1px, then how to resolve the last line border-bottom with the box Border-bottom close, display 2px border problem?

In order to solve the above problem, we need to understand some of the characteristics of the margin itself, the following summary of the margin, in order to review and find later.

Block-level element margin (1) Two "up and down" and "non-floating" block-level elements, the vertical margin between two elements (margin) is the larger of the adjacent margins (merge). margin:20pxmargin:30px such as: orange element margin-bottom is 20px, gray element Margin-top is 30px, then the vertical outer space between two elements is larger 30px (2) Two "adjacent" and "floating" block-level elements, The margin (margin) between the two elements is the sum of the adjacent margins (not merged). margin:20pxmargin:20px such as: The orange element margin-right is 20px, the gray element Margin-left is 20px, then the outer space between two elements adjacent margin and 40px in-line element outer margin (1) Row elements do not occupy the upper and lower margins.margin:0px margin:30pxFor example: The orange element margin is 0px, the gray element margin is 30px, but the two elements are displayed horizontally, and the left and right margins do not play a role (2) the left and the outer margins of the inline elements are not merged.margin:20px margin:30pxFor example: The orange element margin is 20px, the gray element margin is 30px, the margin between the two elements is approximately the distance of the adjacent margin and 50px (not merged), in fact, even if there are no horizontal margins between the two lines will not be completely close to the negative margin

• margin Guide: the base line of margin movement, which is stationary relative to box, and the value of margin is the amount of the box's displacement relative to the reference line
• 1, Top, left guide: Set the element of margin: (1) the upper (left) edge of the content of the parent element is the reference line, and its own downward (right) move (2) with the next (right) edge of the adjacent element margin as a guide, and move it down (right)
• 2, Bottom, right guide: Set the element of the margin: (1) the bottom (right) side of the element itself border as the reference line, and its adjacent elements move down
• The displacement direction above is when the margin value is positive, and if the margin is negative, the displacement is in the opposite direction
• More negative margin use cases, recommended reading: Negative beauty: Negative margin in the page layout of the application

container1margin:-10px 20px-20px 40pxmargin:0 For example: Container1, two elements are block-level elements that do not float.
※ Modifying the margin-top of the orange element will affect the orange element moving up or down relative to the Container1;
※ Modifying the margin-bottom of an orange element will affect the yellow element moving up or down relative to the orange element.
also note that the following elements in the DOM structure are superimposed over the preceding elementsContainer2 margin:-10px-20px-20px 40px margin:0 For example: Container2, two elements are "floating" block-level elements.
※ Modifying the margin-left of the orange element will affect the orange element moving left or right relative to the Container2;
※ Modifying the margin-right of an orange element will affect the yellow element moving to the left or right percentage margin relative to the orange element

• When the element margin is a percentage, the four specific values of the margin are calculated based on the "width or height" of its parent element
• 1. horizontal display (default): calculates margins based on the percentage of the parent element's width
• 2, portrait: calculates the margin based on the percentage of the parent element's height (test writing-mode This thing only IE can make, IE5 have, and to IE11 also strong support)

Demo1: Parent element Landscape Display margin:10% 5%
such as: Demo1:
Margin-left, margin-right= $Demo 1.width () *5% = 25px;
Margin-top, margin-bottom= $Demo 1.width () *10% = 50pxDemo2: Parent element Portrait (switch to IE test) margin:10% 5% such as: Demo2:
Margin-left, margin-right= $Demo 1.height () *5% = 10px;
Margin-top, margin-bottom= $Demo 1.height () *10% = 20px finally attached to the demo source code, some details to be improved: HTTP://RUNJS.CN/CODE/DN7IBWNT

Deep analysis and summary of margin characteristics