Home > Developer > Web Develop
Before the front-end development process, have not encountered the problem of the integration of the margin (in fact, because most of the time directly with the front-end style library ("the"), this time need to start a page, but also quite simple, but encountered a strange problem, so learn to record.
ProblemThe test code is as follows:
<!doctype html>
After the sub-Div has been set margin-top , the parent Div is followed together margin-top .
The reasons are as follows:
Margin collapsing margin merge
The top margin and bottom margin of a block are sometimes grouped (folded) into a single margin, whose size is the maximum margin that is combined into it, which is known as margin collapse (margin collapsing), or margin merge.
3 basic reasons for margin consolidation:
1. Adjacent Elements
The margin between the adjacent two sibling elements is merged
2, block-level parent element with its first/last child element
- If the block-level parent element does not exist border, padding, inline part, block formatting context created, or clearance to isolate the top margin of the first child element, a margin merge is sent.
- If the block-level parent element does not exist border, padding, inline content, height, min-height, max-height to isolate the bottom margin, it is merged with the last child element.
3. Empty block elements
If there is an empty block-level element, there is no border, padding, inline content, height, min-height to isolate the upper and lower margins, then its upper and lower margins will be merged.
- When both are positive, take the larger of the two.
- When both are negative, take the larger absolute value.
- When one is negative, the other is combined with.
- The margins are set to 0 o'clock, and these rules are still in effect.
BFC (block formatting context block formatting contexts) Merge with element margins:
- When two elements belong to a different BFC, the margins of the two elements are not merged .
- But within the same BFC, the margins of the two adjacent elements will still be merged.
Block formatting context block formatting contexts
A block formatting context is part of the visual CSS rendering of Web pages. It is the area where the block-box model appears, and also the area in which floating elements interact with other elements.
A block formatting context is created by one of the following:
- The root element or some element that contains it
- Floating element (float of element is not none)
- Absolutely positioned element (position of element is absolute or fixed)
- Inline block (element with Display:inline-block)
- Table cell (element with Display:table-cell,html table cell default property)
- Table caption (element with display:table-caption, HTML table title default property)
- Display implicitly creates anonymous table columns, including table, Table-row, Table-row-group, Table-header-group, Table-footer-group (these are the default styles for HTML), or Inline-table
- A block element with a overflow value that is not visible.
- Display:flow-root
- Flex Project
- Grid Project
- Multi-column containers (Column-count and column-width are not auto, including elements of Column-count:1)
- Column-span:all should always create a new formatting context, even if the element with Column-span:all is not wrapped in a multi-column container.
Solution SolutionsKnow the cause of the problem, and understand the relevant principles, it is very good to run.
1, to Div2 set border
In order not to change the size of the DIV2, you also need to set box-sizing to Border-box to include padding and border within the defined width and height
.div2 { background: blue; height: 200px; border-top: 1px solid transparent; box-sizing: border-box;}
2, remove div2child margin, change to set div2 padding
.div2 { background: blue; height: 200px; padding-top:50px; box-sizing: border-box;}
3. Div2 set as inline element
.div2 { background: blue; height: 200px; display: inline-block; width: 100%;}
4. Clear floating
All floating elements are contained within DIV2, adding style Clearfix
.clearfix::before, .clearfix::after{ overflow: hidden; display: table; visibility: hidden; content: ‘‘; clear: both;}
Or create a new BFC to make it in a different context, without merging the margins.
5, to Div2 set position
.div2 { background: blue; height: 200px; position: absolute; width: 100%; max-width: 750px;}
6. Set float to Div2, note that the following elements need clear floating
.div2 { background: blue; height: 200px; float: left; width: 100%;}
7. Set Display for Div2
.div2 { background: blue; height: 200px; display: inline-block; /*display: table;*/ width: 100%;}
8. Set Flex to Div2
.div2 { background: blue; height: 200px; display: flex; flex-direction: column;}
Original AIM
ReferenceHttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
CSS margins Merge & block format context
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
