Use the margin property of CSS in the page layout introduction

The margin property can determine the wide height of many HTML elements, so it can also play an important role in layout, so let's take a look at the use of the margin property of CSS in the page layout. Introduction

Basis

1. Element containing-box width height equals content width

Html

<p class= "wrap" >    <p class= "item1" ></p>    <p class= "item2" ></p></p>

Css

. wrap {      float:left;      border:2px solid #000;    }   . item1 {      width:100px;      height:100px;      Background: #fdf;      margin-left:10px;      margin-top:10px;      margin-right:20px;      margin-bottom:30px;   }   item2 {      width:50px;      height:50px;      Background: #adf;   }

There is only one condition that satisfies principle 1, the element is not width and is not in the document flow, at this time, the width height of the Containing-box such as the width and height of the parent element wrap produces the width of the border-box and the width of the margin, i.e., The margin value of a child element is also part of its containing-box. Margin has two types of reference lines, the first is the margin-top and Margin-left reference lines, the second class is margin-bottom and Margin-right reference lines, The reference line for the first type of margin is a reference line with the edge line of the Containing-box in which it is located, as shown in the example above, when the element is adjusted for item1 margin-top and Margin-left values. The item1 element. The size of the containing-box is also changing so that its edge line is constantly changing as well. The position of the item1 element itself is also changing, and it looks like. Item1 itself has moved. The reference line for the second type of margin is the reference line of the element's own edge line (the outer edge of the margin), and similarly, the Margin-bottom value in the above example is adjusted. Item1 's margin-bottom is changing, In other words, its own edge line is constantly moving, while causing the. item2 to move. According to the above discussion, we can conclude that the adjustment of the margin is equal to the position of the reference line in which it is relative is moved, and the element moving relative to the reference line is moved. The element itself moves relative to the edge line of the Containing-box, moving with the element itself being a sibling of the element relative to the edge line of the element itself. Reference line, the margin value that changes the reference line by the direction the arrow refers to is positive.
In summary, we can use the margin to move the element itself, but also to let its neighboring elements move, while moving, we need to know that the size of its containing-box is also changing.

In summary, when the element width height is equal to the content wide height, you can adjust its containing-box size by adjusting the margin value of the content, because the change of containing-box will cause the element itself to move, that is, you can move the element, You can also adjust the spacing between elements and elements.

2. Element content width equal to the width of its containing-box

<p class= "wrap" >   <p class= "Wrap-inner" ></p></p>

. wrap {       width:100px;       border:2px solid #000;       margin:0 auto;   }   . Wrap-inner {       height:50px;       Background: #fdf;   }

In the example above, the border-box width of the element Wrap-inner plus the size of margin is equal to its containing-box width, so when the containing-box width is fixed, the formula ' Margin-left ' + ' Border-left-width ' + ' padding-left ' + ' width ' + ' padding-right ' + ' border-right-width ' + ' margin-right ' = width of contain ing block, adjust its own margin-left or margin-right value, will make Wrap-inner itself size changes, margin-left is positive and the value gradually becomes larger, then Wrap-inner itself width gradually smaller, If the margin-left is negative and gradually becomes smaller, the wrap-inner itself becomes larger, margin-right the same. It is important to note that the width of the inheritance and width:100% here is essentially different, because width:100% is equal to its containing-box 100% and its margin,border or padding are related to wood, Just look at my example of width and height discussion series three, wordy, but here's where it's easy to make mistakes. Must pay attention to, must pay attention to, must pay attention to!!! The important thing to say three times.

The Margin-left and right are adjusted to -10px, and, according to the calculation, the wrap-inner becomes wider.

The Margin-left and right are adjusted to 10px, and the Wrap-inner narrows according to the calculation

In summary, when the element width or height is equal to the width or height of its containing-box, and the width of the containing-box is fixed, we can use margin to adjust its own width size. In other words, when the width height is related to Containing-box, we use margin to adjust the size of the inner element.

Calculation of different element margin
Inline-level elements
Inline, non-permutation element: If the margin value is auto, the computed value of Margin-left and Margin-right is also 0
Inline, Replacement element: Ibid.
Inline-block, the permutation element in the document flow: Ibid.
Inline-block, non-permutation elements in the document flow: Ibid.
Block-level elements
Block-level non-permutation element, in the document flow
' Margin-left ' + ' border-left-width ' + ' padding-left ' + ' width ' + ' padding-right ' + ' border-right-width ' + ' margin-right ' = Width of containing block
The following scenario, if the margin value is auto

If width is an auto value, then the other value is auto value of 0
If the value of Margin-left and Margin-right is auto, the values used are equal, and are centered horizontally relative to the containing block.
Block-level permutation elements, in the document flow
Same block-level non-permutation element.

Summary
Inline and non-permutation elements, when the margin value is auto, the computed values for both Margin-left and Margin-auto are 0.
Block-level permutation elements and non-permutation elements:
' Margin-left ' + ' border-left-width ' + ' padding-left ' + ' width ' + ' padding-right ' + ' border-right-width ' + ' margin-right ' = Width of containing block
If width is an auto value, then the other value is auto value of 0
If the value of Margin-left and Margin-right is auto, the values used are equal, and are centered horizontally relative to the containing block.

Lay out with margin
How often do we encounter those problems in the layout? Here are some of the problems I have encountered in my own practice

Question 1
When we get a copy of the design, and then this design has a layout like the following, the overall center, the elements in a row, of course, the layout of the way there are many kinds of, then if we use a floating layout or display:inline-block layout What will happen, we can see, If the above two ways to layout, then the width of each block and the gap will exceed the width of the containing block, of course, we can also increase the width of the containing block to leave enough space for the elements to place, but this method is obviously undesirable, then how to solve the problem of this position is not enough, you can see the chestnut 1 below.

Chestnuts
Html

<p class= "Container" >  <p class= "Inner-wrap" >      <p class= "inner" ></p>      <p class = "inner" ></p>      <p class= "inner" ></p>  </p></p>

Css

body {     margin:0;   }   . container {     margin:0 auto;     width:980px;   }   . Inner-wrap {     margin-left: -10px;   }   . inner {     float:left;     margin-left:10px;     width:320px;     height:200px;     Background: #2df;   }

This layout takes advantage of principle 2, which uses negative margin to increase the width of the inner-wrap, but does not change the overall width of the case to achieve the effect. As follows

Question 2
The above example simply implements a three-column fixed-width layout, which can cause problems when the screen width changes. Therefore, we will have the following requirements.

Left and right column fixed, middle column adaptive

Chestnuts
Html

<p class= "main" >  <p class= "main-content" ></p></p><p class= "left" ></p>< P class= "right" ></p>

Css

. main {     float:left;     width:100%;   }   . main-content {     height:200px;     Background: #2da;     margin:0 200px;   }   . left,.rightright {     float:left;     width:200px;     height:200px;     Background: #ccc;   }   . Left {     margin-left: -100%;   }   . rightright {     margin-left: -200px;   }

The effect is as follows, when you reduce the screen, the middle part will shrink with the screen, the other two parts of the width of the same, also meet the main content priority loading requirements, can be described as double benefit

Analysis:

You can see that the above layout takes advantage of principle 2, but there are still a few reasons to ask.

First, why does the main inside must be nested main-content, why not directly use a single main (assuming 1)?
Second, why is it important to set float:left on Main, can you set other values, such as position:absolute (assuming 2)?
Before analyzing the layout above, we also need to understand that the above layout satisfies our needs, there are two points 1. Primary content is loaded first. 2. The main content is self-adapting. Here we can analyze how we achieve the above two purposes. First of all, to achieve the goal of 1, we put P.main in front to write, because the browser is rendered from bottom to bottom of the page, placed in front of the first will be rendered. And because P.main is a block-level element in the document flow, it will have a single row, so we need to leave it out of the document flow so that the following elements will have a chance (the reason for this is not to consider display: Inline-block is because the length of the P.main is exclusive to a row, even if the set Display:inline-block does not have any effect, the following element still does not come up. To achieve Goal 2, it is necessary to use principle 2. At the same time, there are two assumptions in the two questions raised above.

Suppose 1, if using a single main, could satisfy both of these requirements? We can try.
Html

<p class= "main" ></p><p class= "left" ></p><p class= "right" ></p>

Css

body {     margin:0;   }   /* Note here to get rid of the main flow mode, the following elements are on the */.main {     float:left  margin:0 210px;     height:200px;     Background: #2da;   }   . left,.rightright {     float:left;     width:200px;     height:200px;     Background: #ccc;   }   . Left {     margin-left: -100%;   }   . rightright {     margin-left: -200px;   }

The yellow two parts separated from the middle line are the left and right margins of each main.

From the results, we can see that it is not possible to use a single main because the width of the element is 0 without the width and the element is not in the flow of the document, and it does not meet our needs, just because we also want to satisfy the 1.main element is not in the document Flow 2. The element is not width and is in the document flow. These two conditions can certainly not be achieved at the same time under a main element, so we need to nest a main-content to satisfy the condition 2. This also explains why you must nest a main-content.
Resolved Issue 1, now we're going to question 2.

Suppose the float value on the 2,main can be changed to Position:absolute?
Again, let's try.
Html

<p class= "main" >  <p class= "main-content" ></p></p><p class= "left" ></p> <p class= "right" ></p>

Css

body {     margin:0;   }   . Main {     position:absolute;     width:100%;   }   . main-content {     margin:0 210px;     height:200px;     Background: #2da;   }   . left,.rightright {     width:200px;     height:200px;     Background: #ccc;   }   . Left {     float:left;   }   . rightright {     float:rightright;   }

The answer is yes, but we need to get rid of some values, and when main is float to P.left and p.right to set the Margin-left value is because the floating element floats, when its outer edge touches the bounding box or another floating box border. The p.main of floating elements occupy an entire line, so the following floating elements p.left and p.right are squeezed down, and set their margin-left values can move them up, here use principle 1. When we change the float value of P.main to Position:absolute, there will be no problem of being squeezed, and the value of float of p.left and p.right can be set directly. The effect is as follows.

If only need to achieve the width of the adaptive requirements, then, this time you can put P.main on the last side and not nested p.main-content, how to achieve, you can try it yourself.
Question 3
As the design is shown below, there may be border overlap in the course of our layout, because on the one hand we need to add border to the whole, and on the other we need to use border to separate the three small pieces. So if we add a right border to each small piece, we can imagine that the top right side of the border will appear stacked and this is not what we want to see, so, how to solve this problem, you can see the following example of the answer.

Chestnuts
Html

<ul>  <li>1</li>  <li>2</li>  <li>3</li></ul>

Css

UL {     position:absolute;     margin:0;     padding:0;     List-style:none;     border:4px solid #c5c5c5;   }   Li {     float:left;     width:200px;     height:50px;     line-height:50px;     Text-align:center;     border-right:4px solid #c5c5c5;   }

Did not add margin-right:-4px on Li, before, effect, occurred stacking.

Add Margin-right: After -4px, achieve the desired effect. Because the right border with the UL has been moved and the third Li's right border has been overlapped. As a result, the results are in line with expectations,

This layout uses principle 1 to achieve the desired effect by controlling the position of the adjacent elements.
The use of principle 1 can also be implemented in the center of the layout of elements, first let the elements on the left to move 50%, and then set the left margin value of the element is set to half the width of the element itself, to move the element itself. You can achieve the goal of centering the element.

Summary
1. The width of the element is equal to Containing-box width. The
can adjust the width of the element by adjusting the value of the margin.
2. When the element width is independent of containing-box. The
can move the position of the element by adjusting the value of the margin.