Margin and visual dimensions
1.1 Using the normal block horizontal element with no Width/height set
2.2 Only available in horizontal direction dimensions
<body style= "Background-color: #1a2b3c" >
<p style= "border:4px 6px; Background-color:blue ">
Text <br/>
Text <br/>
</p>
</body>
The width of the box changes when the margin value is changed.
Application: Self-adapting layout for one-side fixed width
<p style= "margin-left:170px" > Picture left floating </p>
Margin and occupy size
1.block/inline-block horizontal elements are applicable
2. Independent of no set width/height value
3. Suitable for horizontal and vertical directions
Cases
<body style= "Background-color: #1a2b3c" >
</body>
You can see that the container occupies a smaller size.
Take advantage of this feature
White up and down in the rolling container
<p style= "height:100px; padding:50px 0; " >
</p>
The inside box is open outside the box to show the scroll bar, of course this is not in the non-Chrome browser white effect (there is no below).
The right approach is
<p style= "height:100px; ">
</p>
Second: CSS margin and percent units-understanding margin percent units
Horizontal direction percent/vertical direction percent
Average element percent/absolute element percentage
Calculation rules for percent margin
img{margin:10%;with:600px;heigth:200px;}
The percent margin of a normal element is calculated relative to the width of the container! So here's the margin:10%;---->top:60px,left:60px; is calculated relative to the width of the container.
Percent margin of an absolutely positioned element
img{margin:10%; position:absolute;}
The percent margin of an absolute element is calculated relative to the width of the first anchor element's ancestor element (relative/absolute/fixed). The normal element is calculated relative to the parent element.
<p style= "width:1024px;height:200px; position:relative; " >
<p style= "width:600px; height:200px ">
</p>
</p>
Utilization characteristics
Wide Height 2:1 Adaptive Rectangle
. box{background-color:olive; Overflow:hidden;}
. Box > p{margin:50%}
Here also involves a just point is the margin overlap. Overflow is also set here because it prevents margin overlap
Third, margin overlap common characteristics
1.block horizontal elements (excluding float and absolute elements)
2. Do not consider Writing-mode (writing direction is from top to bottom), only occurs in the vertical direction (Margin-top/margin-bottom)
Margin overlaps 3 scenarios
1. Adjacent sibling elements
P{line-height:2em;margin:1em 0;background: #f0f3f9;}
<p> First line </p>
<p> Second Line </p>
There's going to be a margin overlap here.
2. Parent and first/last child elements
. Father{background: #f0f3f9}
<p class= "Father" >
<p class= "Son" style= "margin-top:80px;" >son</p>
</p>
Setting margin for the first or last child element of the child is equivalent to setting the same margin value for the parent element, the same margin value as the child element, and the same margin as the child element and the parent element
3. Empty block Element
. Father{background: #f0f3f9}
<p class= "Father" >
<p class= "Son" ></p>
</p>
Son's height here is only 1em, not 2em.
Empty block element margin overlaps other conditions
1. Element does not have border settings
2. Element has no padding value
3. There is no inline element inside
4. No height, or min-height
Margin-top overlap
1.1 Parent element Non-blocky formatting context element
1.2 parent element does not have border-top settings
1.3 Parent element has no padding-top value
1.4 There is no inline element separation between the parent element and the first child element
Margin-bottom overlap
1.1 Parent Element Non-blocky formatting context element
1.2 parent element does not have Border-bottom settings
1.3 parent element has no Padding-bottom The value
1.4 does not have an inline element delimited between the parent element and the last child element
1.5 The parent element has no height,min-height,max-height limit
Kill margin-top overlap
. Father{background: #f0f3f9}
<p class= "father";
<p class= "son" style= "margin-top:80 px; " >son</p>
</p>
1. The parent element is a non-blocky formatting context element. Father:overflow:hidden;
2. The parent element has no Border-top setting
. father:border:4px solid #ccc;
3. The parent element has no padding-top value
4. There is no inline element separation between the parent element and the first child element
<p class= "father" >&NBSP;
<p class= "Son" style= "margin-top:80px;" >son</p>
</p>
Kill Margin-bottom overlap
Front four and margin-top,
<p CLA Ss= "Father" style= "height:100px" >
<p class= "son" style= "margin-top:80px;" >son</p>
</p>
Calculation rules for margin overlap
1. Positive fetching of large values
. a{margin-bottom:50px;}
. b{margin-top:20px;}
<p class= "a" ></p>
<p class= "B" ></p>
. father{margin-top:20px;}
. son{margin-top:50px;}
<p class= "Father" >
<p class= "Son" ></p>
</p>
. a{margin-top:20px;margin-bottom:50px}
<p class= "a" ></p>
The above results are all margin:50px;
2. Addition of positive and negative values
. a{margin-bottom:50px;}
. b{margin-top:-20px;}
<p class= "a" ></p>
<p class= "B" ></p>
. father{margin-top:-20px;}
. son{margin-top:50px;}
<p class= "Father" >
<p class= "Son" ></p>
</p>
. a{margin-top:-20px;margin-bottom:50px}
<p class= "a" ></p>
The above results are all 30px.
3. Negative negative value
. a{margin-bottom:-50px;}
. b{margin-top:-20px;}
<p class= "a" ></p>
<p class= "B" ></p>
. father{margin-top:-20px;}
. son{margin-top:-50px;}
<p class= "Father" >
<p class= "Son" ></p>
</p>
. a{margin-top:-20px;margin-bottom:-50px}
<p class= "a" ></p>
The results above are -50px.
What is the meaning of margin overlap?
The beginning of the birth of the Web page ... Just typesetting text layout, not so complicated now.
1. Continuous paragraphs or lists, such as, if there is no margin overlap between the end and the other sibling label 1:2 relationship, typesetting is not natural;
Nesting or placing any bare p anywhere in 2.web will not affect the original layout
3. Left empty person A P element, do not affect the original reading typesetting
Practice:
Leveraging margin overlap
. list{margin-top:15px;}
Better implementation
. list{
margin-top:15px;
margin-bottom:15px;
}
More robust, with the last element removed or position swapped, without breaking the original layout.
4th session: Understanding the Margin:auto in CSS
The mechanism of Margin:auto
Element sometimes, even if no width or height is set, it is automatically populated
P{background: #f0f3f9}
If width or height is set, the auto-fill feature is overwritten
P{width:500px;background: #f0f3f9;}
The margin value at this time is 0px
If you set the value width or height, the AutoFill feature is overwritten.
The size of the original should be filled by width/height forced changes, and Margin:auto is to fill the size of the change set;
P{width:500px;marign-right:100px;margin-left:auto;}
If one side is fixed, the side Auto,auto is the remaining space size, and if both sides are auto, the remaining space is divided evenly
Why the picture img{width:200px;marign:0 Auto} is not centered
Because the picture is inline, it does not occupy the entire container, even if it has no width.
Set img{display:block;width:200px;marign:0 Auto;}
Because at this time the picture is block level, even if there is no width, it will occupy the entire container can not be displayed on one line.
Why clearly the container height, the element height Margin:auto 0 cannot be vertically centered
. Father{height:200px;background: #f0f3f9;}
. son{height:100px; Width:500px;margin:auto;}
Horizontally centered, not vertically centered.
Explanation: If. Son does not have height:100px set, height will automatically 200px high? --no so margin is not auto-populated, forcing the width height to be set, so it is not automatically populated.
Note: If the child is greater than the parent in the horizontal direction, it is not centered when the result evaluates to a negative value.
Achieve Vertical margin Center
Change the vertical direction of the flow to achieve vertical Margin:auto
Writing-mode and vertical centering (CSS3)
. father{height:200px; width:100%; wiriting-mode:vertical-lr;}
. Son{height:100px;width:500px;margin:auto;}
Absolute and Margin Center
. father{height:200px;position:relative;}
. son{position:absolute; top:0px right:0px bottom:0px;left:0px}
. Son no Width/height,absolute element automatically fills the container.
When width and height are set
. father{height:200px;position:relative;}
. son{position:absolute; top:0px right:0px bottom:0px;left:0px;width:500px;height:100px;}
The original stretch spread is now retracted back.
The stretched space is set margin:auto; the average distribution will be horizontally vertically centered.
. father{height:200px;position:relative;}
. son{position:absolute; top:0px right:0px Bottom:0px;left:0px;width:500px;height:100px;margin:auto;}
ie8+ above support!
Session five: CSS margin negative position
Justify (margin changes element size) under 1.margin negative values
Example
. box{
width:1200px; Margin:auto;background:orange;
. Ul{overflow:hidden;}
. li{
width:380px;height:300px;
margin-right:20px;
Background:green;
Float:left;
}
}
The list of implementations leaves a gap in the last one.
The size of the container is changed by the negative value of margin, so that the container becomes wider. Can solve this problem perfectly.
. box{
width:1200px; Margin:auto;background:orange;
. ul{overflow:hidden;margin-right:-20px;}
. li{
width:386.66px;height:300px;
margin-right:20px;
Background:green;
Float:left;
}
}
Equal-height layout margin change element occupy space under 2.margin negative value
Margin and the upper and lower left white
<p style= "height:200px;" >
</p>
. box{overflow:hidden;resize:vertical;}
. Child-orange,
. child-green{margin-bottom:-600px;padding-bottom:600px;}
. Child-orange{float:left;background:orange;}
. Child-green{float:left;background:green;}
By setting a large margin-bottom negative value, and a large padding-bottom fill the missing space, the implementation of the high-level layout. Principle: Content block elements can be displayed in padding. As long as there is no setting
Background:clip,box-sizing:content
Two-column adaptive layout under 3.margin negative, elements occupy space follow margin move
<p style= "float:left;width:100%" >
<p style= "margin-right:170px;" > Picture Right Floating </p>
</p>
Parsing the invalid case of CSS Marign
1.inline horizontal element's vertical margin is invalid
2 Prerequisites 1. Non-replacement elements, such as not IMG elements; 2. Normal writing mode
Cases
<span style= "margin:0px" >marign:0px</span>
Set margin233px for span;
The horizontal is valid and the vertical direction is not valid.
2.margin overlap
3.display:table-cell
Display:table-cell/display:tab-row and other declaration margin invalid!
Replacement element for exception Img,button
4.position and margin
The margin value of an absolutely positioned element's non-locating direction is "invalid"
The margin value of absolute positioning is always valid, not just like ordinary elements.
5. Beyond's margin failure
If there are floating elements in the BFC content block, the margin of the next element is calculated relative to the outer p.
6. Margin failure due to inline
P[style= "Height:200px;background-color: #f0f3f9;"] >img[style= "MARIGN-TOP:30;"]
When Margin-top is big enough, it fails.
Explanation: Inline elements to achieve and baseline alignment, after the picture plus X can be seen, no matter how far margin-top, he will not leave the outside of the container.
Seventh words margin-start and margin-end
Margin-start
img{
margin-left:100px;
-webkit-margin-start:100px;
-moz-margin-start:100px;
margin-sart:100px;
}
1. Normal flow, margin-sart equivalent to Margin-left, the two overlap does not accumulate;
2. If the horizontal loss is from right to left, Margin-start equals margin-right;direction:ltr ( RTL)
3. In vertical flow (WRITRING-MODE:VERTICAL-LR), Margin-sart is equivalent to other margin-related properties under Margin-top
WebKit
Margin-before
img{-webkit-margin-before:100px; The default flow direction is equivalent to Marign-top
Margin-after
Img{-webkit-marign-a fter:100px;} In the case of the default flow, it is equivalent to Margin-bottom;
Margin-collapse outside Border
-webkit-margin-collapse:collapse|discard|separate
control margin overlap
Collapse Default-overlapping
Discard cancel
separate delimited without overlap
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
