In-depth understanding of how to use margin in CSS

1.css marginYou can change the size of the container
Element size
Visual size--the width of the box in the standard box model does not include the margin value , clientWidth
Occupied size - including the width of margin outWidth is not in the standard, there is a corresponding method in jquery

Margin and visual size
1.1 Use the ordinary block horizontal element that does not set width/height
2.2 Only applies to horizontal dimensions
　background-color:#1a2b3c">
　　　　

　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 Generationleg: 6px;
　　　

　　
　　 The width of the box will change when the margin value is changed.

Application: Implementing adaptive layout with fixed width on one side

　　:left;"> 　　　

:170px">Pictureleftfloating

  margin Applicable to both block/inline-block horizontal elements

　　　　　
　　　
　　You can see that the container occupies The size has become smaller.
　　 Take advantage of this feature
　　 Leave space above and below inside the scroll container
　　="
300
">
　　　

　　 The inner box opens the outer box to display the scroll bar. Of course, this has no white space effect in non-chrome browsers (there is Not shown below).
　　The correct approach is 　　

　　　
　　Chapter 2: css margin and percentage unit - understanding margin percentage unit
　　Horizontal percentage/vertical percentage
　　Percentage of ordinary elements/Percentage of absolute elements


　　 Calculation rules for percentage margin
　　 img{margin:10%;with:600px;heigth:200px;}

　　　Percent margin of ordinary elements is calculated relative to the width of the container! So the margin:10%;---->

top
:60px,left:60px; are calculated relative to the width of the container.

　　　Absolute positioningPercent margin of element
　　　 img{margin:10%; position:absolute;}
　　　Percentage margin of absolute element is relative to the first one The positioned element's ancestor element has a (relative/absolute/fixed) width calculated. Ordinary elements are calculated relative to their parent element.
　　 　　

　　　　　　

="margin:10%;position:absolute;" />

    
　　　　　　 .box{background-color:olive;
overflow
:hidden;}
　　 　　 .box > p{margin:50%} 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 since in in in in inc's | Overflow is set here to prevent margin overlap
Chapter 3 Common features of margin overlap
1.block horizontal elements (excluding float and absolute elements)

2.Do not consider

writing-mode
(The text writing direction is from top to bottom), only occurs in the vertical direction (
margin-top/margin-bottom) Margin overlap 3 situations 1. Adjacent sibling elements

　　p{

line-height
:2em;margin:1em 0;background:#f0f3f9;}
　　　

First Line & lt;/p & gt; & lt; p & gt; second line & lt;/p & gt; Here there will be a Margin overlap. .father{background:#f0f3f9}
　　　

　　　　

son

　　　

　　 Setting margin for the first or last child element is equivalent to setting the same margin value for the parent element. The child element has the same margin, and the child element has the same margin value as the parent element
3. Empty block element
　　 .father{background:#f0f3f9}
　　

　　　

& Lt;/p & gt;
Height is only 1EM, not 2em
empty block element Margin overlapped other conditions
1. The element does not have BORder settings
2. Element does not padding value
3 3 .There is no inline element inside
　　 　　 4. No height, or
min-height



　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 4. No height, oræÃ= ## 1.2 Father element does not have Border-Top settings 1.3 Father Element No Padding-Top

Value

1.4 There is no inline element separation from the parent element and the first child element

　　Margin-bottom overlap
　　　 　　1.1 Parent element non-block formatting context element
　　 　　 　　1.2 Parent element has no border-bottom setting
　　　 　　1.3 Parent element has no padding-bottomvalue
1.4 There is no inline element separation between the parent element and the last child element
1.5 The parent element does not have height, min-height, max-heightLimitations
　　 Get rid of margin-top overlap
　　　. father{background:#f0f3f9}
　　　　　

　　　　　

son

   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
​ ​ ​ ​​

 
-The same as top,
　　　　

 
　　　　　　

son< ;/p>
　　　　

　　 Calculation rules for margin overlap
　　 1. Take the largest value for positive
　　　.a{margin-bottom:50px;}
　　　　.b {margin-top:20px;}
　　　　　

　　　

.father{margin-top:20px;}
　　 　　 .son{margin-top:50px;}
　　　

　　　　

< ;/p>
  ;

The above results are all margin:50px;
2. Add positive and negative values
.a{margin-bottom:50px;}
.b{margin-top:- 20px;}
　　top:-20px;}

　　 .son{margin-top:50px;}

　　

　　　

　　　

　　　.a{margin-top:-20px;margin-bottom:50px}
　　

　　 The above results are all 30px
　　3. The most negative value
　　.a{margin-bottom:-50px;}

　　.b{margin-top:-20px;}

　　< p class="a">

　　

　　.father{margin-top:-20px;}
　　.son{margin-top:-50px;}

　　

　　;

　　.a{margin-top:-20px;margin-bottom:-50px}
　　

　　 The above results are all -50px
What is the meaning of margin overlap?
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
1. Continuous paragraphs or lists, if there is no margin overlap, the spacing between the first and last items will be 1:2 with other sibling tags, and the layout will be unnatural;

2. Nested or directly put any bare items anywhere in the web p will not affect the original layout

3. The missing p element should not affect the original reading layout

Practice:
Make good use of margin overlap
.list{margin-top:15px;}
Better implementation
.list{
margin-top: 15px;
　　　　　margin-bottom:15px;
　　　　}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　cred  by 15px / `
    More robustness, the original layout will not be destroyed if the last element is removed or the position is changed.
Chapter 4: Understanding margin:auto in CSS
　　The mechanism of margin:auto
　　Elements sometimes will be automatically filled even if width or height is not set

　　p{background:#f0f3f9}

If you set width or height, the auto-fill feature will be overwritten
width or height, the autofill feature will be overridden.

　　 The original size that should be filled is forcibly changed by width/height, and margin: auto is set to fill this changed size;

　　 p{width:500px;marign-
right :100px;margin-left:auto;}

If one side is set, one side is auto, and auto is the size of the remaining space. If both sides are auto, the remaining space will be divided equally

Why The image img{width:200px;marign:0 auto} is not centered

Because the image is inline horizontal, even if there is no width, it will not occupy the entire container.
Set img{
display:block;width:200px;marign:0 auto;} Because the image is block horizontal at this time, even if there is no width, it will occupy the entire container and cannot be in one line. show.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　over over the margin:auto 0 of the element is fixed height and cannot be vertically centered

.father{height:200px;background:#f0f3f9;}

.son{ height:100px; width:500px;margin:auto;}
It is centered horizontally, but not vertically.

Explanation: If .son does not set height:100px; will the height automatically be 200px high? ——NO Therefore, the margin cannot be automatically filled. The width and height are forced to be set, so it will not be automatically filled.

Note: If the child is larger than the parent in the horizontal direction, the calculation result will not be centered when it is a negative value.

# Implementation of the vertical direction Margin 居 is the vertical direction, and Margin: Auto
Mode and the vertical center (CSS3)
.Father {Height: 200px; width:100%; wiriting-mode:vertical-lr;}
　　 .son{height:100px;width:500px;margin:auto;}
　　 Absolute and margin are centered
　　 .father{height: 200px;position:relative;}
.son{position:absolute; top:0px right:0px bottom:0px;left:0px}
.son has no width/height, and the 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;}
It used to be stretched and spread, but now it’s retracted.
The stretching space sets Margin: Auto; The average distribution will achieve horizontally. right:0px bottom:0px;left:0px;width:500px;height:100px;margin:auto;}

Support IE8+ and above!
Chapter 5: css margin negative positioning
1. Alignment of both ends with negative margin (margin changes the size of the element)
Example
.box{
Width:1200px; margin: auto;background:orange;
　　　 .ul{overflow:hidden;}
　　　　.li{
　　　　　　width:380px;height:300px;
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　. ## 　　　　　background:green;　　　　　float:left;
　　　　}
　　　}
　　 The last one of the implemented list leaves a gap.
　　　The size of the container is changed by using a negative margin value to make the container wider. Can perfectly solve this problem
　　.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;
　　}
　　　}
　　 2.margin negative The equal-height layout margin under the value changes the space occupied by the element
:50px 0;" />
　　

　　.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 negative margin-bottom value and a large padding-bottom to fill the missing space, a equal-height layout is achieved. Principle: Content block elements can be displayed in padding. As long as

is not set, background:

clip

,box-sizing:content

3. Two-column adaptive under negative margin value Layout, elements occupy space and move with margin

　　

　　

Picture Float right

　　

　　

Chapter 6: Analysis of invalid css marign situation
1. The vertical margin of inline horizontal elements is invalid
2 prerequisites 1. Non-replacement elements, such as not img elements; 2. Normal writing mode

Example

marign:0px
Setting margin233px;
for span is valid horizontally, but invalid vertically.
2.Margin overlap
3.display:table-cell
display:table-cell/display:tab-row and other declaration margins are invalid!

Exception replacement elements img, button

4. Position and margin
The margin value of the non-positioned direction of the absolutely positioned element is "invalid"
The margin value of the absolutely positioned element is always valid. Not just like normal elements.

5. The out-of-reach margin fails

If there is a floating element in front of the bfc content block, the margin of the next element is calculated relative to the outer p.
​ 6. Margin failure caused by inlining
It fails when margin-top is large enough.
Explanation: Inline elements must be aligned with the baseline. Adding x after the picture shows that no matter how far the margin-top is, it will not leave the outside of the container.

Chapter 7 margin-start and margin-end
　　margin-start
　　img{
　　 　　margin-left：100px;
　　　-webkit-margin-start:100px ;
　　 　　 -moz-margin-start:100px;
2. If the horizontal flow is from right to left, margin-start is equivalent to margin-right;
direction
:ltr(rtl)
3. Under vertical flow (writring-mode:vertical-lr ), margin-sart is equivalent to margin-top 　　 Other margin-related attributes under webkit 　　 margin-
before

　　　 img{-webkit-margin-before:100px;} default flow direction In this case, it is equivalent to margin-top 　　　margin-after 　　　　 img{-webkit-marign-after:100px;} In the case of default flow direction, it is equivalent to margin-bottom;
　　margin-collapse The outer border overlaps
    -webkit-margin-collapse: collapse|discard|separate
    Control margin overlap
    Collapse default-overlap
    Discard Cancel
    Separate separation has no overlap

The above is the detailed content of In-depth understanding of how to use margin in CSS. For more information, please follow other related articles on the PHP Chinese website!