CSS learning -- margin

1. what is

margin The outer margin is the space left outside the element, so that there is an appropriate interval between the element and the element; the

margin attribute can set the outer margin attributes in four directions for the element, that is, top, right, bottom, and left. margin is the abbreviation of margin-top, margin-right, margin-bottom, margin-left; the value of each value can be fixed value, percentage or auto;

1.1 Reference lines for top, right, bottom, and left in margin

Their reference lines are divided into two categories, top and left are one category; bottom and right are one category;

top moves vertically downward or upward with the upper edge of the content of the containing block or the lower edge of the margin of the connected element vertically above it as a reference line, which will cause the position of the element to move;

left uses the left side of the content of the containing block or the right side of the margin of the connected elements on the horizontal left side as the reference line to move horizontally to the right or to the left, which will cause the position of the element to move;

bottom moves vertically downwards or upwards using the bottom border of the element itself as a reference line, which may cause the position of adjacent elements to move;

right uses the border right of the element itself as a reference line to move horizontally to the right or left, which may cause the position of adjacent elements to move;

1.2 Positive and negative values ​​of fixed values

• A positive value of
  top left will move the element down and to the right relative to the previous position;
  a positive value of right bottom will increase the blank distance from the adjacent element, and it will not move by itself, and the adjacent elements on the horizontal right and vertical bottom will move away from the element;

• Negative value
  top left Negative value will make the element move up and left in the opposite direction relative to the previous position;
  right bottom will not let the element move margin will overlap with element content (negative value may make neighboring elements closer to themselves and cover themselves. Of course, The width and height of the element itself have not changed.)

  The total width and height of the box = content + padding + border + margin;

  If the width property is set for the box, the width is determined, and setting negative margin-right and margin-bottom will only change the reference line of the box right and bottom.
  If the width of the box inherits the width of the parent element, set negative margin-right and margin-bottom, the width and height of the content of the box will add the absolute value of margin-right / margin-bottom to the original value.

  Figure 1 (left) is the position of the box without margin; Figure 1 (middle) has margin: 20px added to the box; it can be seen that the margin is added to the blank area. The positive value of top is based on the original content-top. Add downward, the positive value of left is based on the original content-left, add to the right, the positive value of bottom is based on border-bottom, add downward, the positive value of right is based on border-right, add to the right,
  
  

1.3 Reference to percentage values

The value of margin can also be a percentage, which refers to the width of the containing block ;

<style>
    body {
    
    
      margin: 0;
    }
   .box {
    
    
    width: 500px;
    height: 300px;
    background-color: palegreen;
   }
   .son {
    
    
    width: 50%; 
    height: 50%; 
    margin: 10% 5%; 
    background-color: pink;
   }
  </style>

  <div class="box">
    <div class="son">子元素</div>
  </div>

The containing block of son is box,
son width = box width * 50% = 500 * 50% = 250px;
son height = box height * 50% = 300 * 50% = 150px;
son margin-top / bottom = box width * 10 % = 500 * 10% = 50px;
son margin-left / right = box width * 5% = 300 * 5% = 15px;

Percentage values ​​for width, margin, padding, left, right, calculated relative to the width of the containing block.

Percentage values ​​for height, top, bottom, calculated relative to the height of the containing block. If the height of the containing block is changed by the content, and the position value is static / relative, and the percentage value is auto, it adapts to the height of the content.
(In the case of default writing-mode: horizontal-tb; and direction: ltr;, when the writing mode changes to vertical, the reference will be exchanged for the height/width of the containing block)

1.4 Deep dig auto

margin: 0 auto; / margin：0 auto 0 auto;
margin: auto； / margin: auto auto auto auto;

According to the CSS specification: if margin-top or margin-bottom is auto, its use value is 0;

Therefore, although the two are written differently, the actual execution results are the same, making the block element horizontally centered.

The auto attribute value can be used on the width, margin-left, margin-right attributes;

The result of auto can be 0px, automatically fill the remaining space, or 100%; the value of auto is uncertain, and the result depends on the browser's own choice. Sometimes, in some special cases, this value can center the element.

The total width of the block element = left and right margin + left and right border + left and right padding + content = width of the containing block;

This formula tells us that the total width of block elements must be exactly equal to the width of the containing block; at the same time, this formula is conditional.

1. width is auto, then other auto values ​​(margin) are 0;
2. The margin-left and margin-right values ​​are both auto. If there is remaining space, the two will divide the remaining space equally to center the element horizontally.

From the conditions, we can know that if width: auto, then there is no margin; if the margin value is 0 auto or auto, then left and right will equally divide the remaining space and center the block element horizontally.

margin: Why can auto achieve horizontal centering?
Because of the auto in the horizontal direction, its calculated value equally divides the available space (remaining space).

Then, if left / right has only one value of auto, auto will make the attribute occupy the remaining available space, and the result of margin-right: auto; is equivalent to right alignment.

You may be wondering why the top and bottom are both auto, so they are counted as 0, and there is no vertical bisection and centering?

This is related to writing-mode, document flow layout rules and method direction:

Our current mainstream version is horizontal text, and its horizontal width is fixed (if there is no explicit definition of width or forced display in one line, it will encounter boundary wrapping instead of horizontal extension). The vertical direction can be infinitely extended.

It is precisely because the vertical direction is infinitely extended and there is no definite value, so there is no reference value that can be used to calculate the margin and height in the vertical direction. That's why when the margin-top / margin-bottom value is auto, auto is counted as 0 px. height: auto; auto follows the size of the content height.

If you change the typesetting layout and change it to vertical text, then the height in the vertical direction is fixed, and the horizontal direction extends infinitely.

Features affected by the writing mode: 1. margin vertical collapse; 2. margin auto; 3. margin and padding percentage values;

2 margin folding (collapse) problem

As mentioned earlier, the margin folding problem is caused by typography. This is because in most cases, the margin in the vertical direction of the fold can appear more beautiful visually, and it is more in line with the designer's expectations.

Margins are used to specify the minimum distance between a non-floated element and the edge of its surrounding box . Two or more adjacent vertical margins are collapsed and use the largest margin value between them . In most cases, collapsing vertical margins can be visually more aesthetically pleasing and closer to what the designer intended. ---- css1 margin translation

In the horizontal writing mode , the margin fold occurs in the vertical direction , that is, margin-top/margin-bottom . In the vertical writing mode , the margin fold occurs in the horizontal direction , that is, margin-right/margin-left .

From the above words, we can extract some key information:

1. The non-floating elements are collapsed, and the floating elements and other elements will not collapse when margins are adjacent;
2. The writing mode determines the margin folding direction, the default is the horizontal writing mode, the margin folding is the vertical direction, and the vertical writing mode is the horizontal folding direction;
3. The margin fold takes a larger value;

Avoid margin folding (collapse) method:

1. Margin collapse of sibling elements
   Floating elements, absolute positioning elements and sibling margins will not cause folding problems;
   in the vertical direction, only set the margin value for one element to avoid folding problems;
2. Margin collapse between parent and child
   There is no margin collapse between the root element and its child elements;
   add border / padding to the parent element, so that the parent and child boxes are no longer fully fitted;
   the attribute overflow is defined and the value is not visible (that is, create A block element with a new block-level formatting context) does not have a margin fold with its child elements; the
   position value of the parent positioning element is absolute / fixed;
   change the element type: add display: table / flex / grid / inline to the parent element -block;
   pseudo-element

   父元素::before {
         
         
   	content: '';
   	 display: table;
   }
   

3. margin usage

1. Allow proper spacing between elements;

2. Center block elements horizontally;
   flow layout (float + margin: auto);
   float + margin minus 50%;
   absolute positioning + margin;

3. Handle special first and last elements;

<style>
    li{
    
    
      height: 30px;
      line-height: 30px;
      border-bottom:1px solid #95ef85;
    }
    </style>

    <div class="box">
      <ol>
          <li>哇，我有下划线 (*^w^*)</li>
          <li>嗯啊嗯啊，我也有下划线 (=^-^=)</li>
          <li>不就是一个下划线，谁还没有啊 (-z-)...</li>
          <li>我，我没有 --(T ^ T)--</li>
      </ol>
  </div>

There are many ways to deal with the underline of the last li, you can use the css selector last-child, etc.; you can also add a class to the last li separately; here we will focus on how the margin handles the last underline;

.box {
    
     overflow: hidden; }
ol {
    
      margin-bottom: -1px; }

The ol margin-box value is -1px, and the height of ol remains unchanged, but the outer margin at the bottom of ol moves up by 1px, just reaching the underline of last. The area of ​​the adjacent box is also shortened by 1px upwards, and overflow: hidden is set; the underline of last is hidden by hidden.

4. Handle gaps in picture list;

<style>
    .wrap {
    
    
      width: 340px;
    }
    .box {
    
    
      overflow: hidden; /* BFC 清浮动*/
      background-color: aquamarine;
    }
    .img {
    
    
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 20px;
      background-color: greenyellow;
    }
    </style>

  <div class="wrap">
    <div class="box">
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
    </div>
  </div>

The width of the wrap is 340px, the box inherits the width of the wrap, which is also 340px, the width of the img box is 100px, and the right margin is 20px, 3 imgs need (100 + 20) * 3 = 360px > 340px, so I can’t put it down, and the 3rd box is wrapped .

Solution:

/*方法1：*/
.img:last-child {
    
    
      margin: 0;
} 
/*方法2：*/
.wrap {
    
    
      width: 340px;
      overflow: hidden;
    }
.box {
    
    
      overflow: hidden;
      background-color: aquamarine;
      margin-right: -20px;
}

The containing block of the box is wrap, so the total width of the box is equal to the content width of the wrap.
3 imgs need 360px in one line, that is, the width (content) of the box needs to be 360px (the position of the green line), but the container wrap is only 340px (the position of the red line), and the total width of the box can only be 340px.
340 (real) = 360 (desired) + ( -20px )

Assume that the width of the wrap changes with the size of the box, and the box width is 360px (the position of the green line), which satisfies the condition that the 3 imgs and their respective right margins are in one line. At this time, the margin-right of the wrap is also at the position of the green line . box set margin-right: -20px; according to

margin is a negative value, the width of the element remains unchanged, top, left move the element up and left, bottom, right
just move the element reference line, so that adjacent elements are closer to the element

It can be seen that the width of the box remains unchanged, which is still 360px, but the reference line of the margin-right of the right outer margin of the box is moved to the left to the red color position, and the wrap also moves to the red color position. At this time, the wrap is just 340px. Set overflow: hidden; hide the yellow area (the right margin of the third box),

Schematic diagram of the box box model:

6. Pseudo-contour visual deception
   Contour layout refers to the way that child elements are laid out with equal heights in the parent element. There are two types of implementation methods for contour layout: false contour and true contour. The false contour is just a contour, while the true contour is a real contour. The margin contour layout is a pseudo-contour.

   Implementation method:
   1. Add padding-bottom: n px; margin-bottom: -n px; n is a larger number to all child elements. There is a problem with the order of the two.
   2. Add overflow: hidden to the parent element;
   principle:
   add padding first, so that the child element will occupy the position downward; negative value of margin will return the bottom reference line of the child element to the starting position when no padding is added, without affecting the position of the parent element Placeholder for sibling elements.
   Add overflow:hidden to the parent element; the height of the parent element will be based on the height of the tallest element in the child element as its own height, and hide the previously added placeholder element padding. The height of left is 200 + 1000 = 1200 px, and the height of right is 300 + 1000 = 1300px.
   From the border of the sub-element in the figure below, it can be seen that the sub-element is not of equal height, just because of the visual misleading of padding and background color. It feels like a contour layout has been achieved.

  <style>
    .wrap {
    
    
      overflow: hidden; /* critical code */
      background-color: #aece8a;
    }
    .left, .right {
    
    
      padding-bottom: 1000px; /* critical code */
      margin-bottom: -1000px; /* critical code */
    }
    .left {
    
    
      float: left;
      width: 100px;
      height: 200px;
      background-color: aquamarine;
    }
    .right {
    
    
      float: left;
      width: 200px;
      height: 300px;
      background-color: thistle;
    }
    </style>
</head>
<body>
  <div class="wrap">
    <div class="left">1</div>
    <div class="right">2</div>
  </div>b 

Reference: 1. The specificity of margin value
2. Margin series learning
3. Why margin: auto can make block elements center horizontally