A guide to using the margin attribute of CSS in page layout

The margin attribute can determine the width and height of many HTML elements, so it can also play a very important role in layout. Next, let’s take a look at the introduction to using the CSS margin attribute in page layout.

Basics

##1. The element containing-box width and height are equal to the 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 can satisfy principle 1. The element has no width and is not in the document flow. , at this time, the width and height of the containing-box generated by the parent element wrap are equal to the width and height of the child element border-box plus the width and height of the outer margin. In other words, the margin value of the child element is also part of its containing-box. There are two types of reference lines for margin. The first type is the reference line of margin-top and margin-left. The second type is the reference line of margin-bottom and margin-right. The first type of margin reference line is based on its location. The edge line of the containing-box is the reference line. As shown in the above example, when the values ​​​​of margin-top and margin-left of element .item1 are adjusted, the size of the containing-box where element .item1 is located also changes, so its The edge line is also constantly changing, which also causes the position of the .item1 element itself to change. It seems that .item1 itself has moved. The reference line of the second type of margin is based on the edge line of the element itself (the outside of the margin is the edge line). Similarly, adjusting the margin-bottom value in the above example, the margin-bottom of .item1 is also constantly changing. Changes occur, which means that its own edge line is constantly moving, which also leads to the movement of .item2. Based on the above discussion, we can conclude that the adjustment of the margin is equivalent to moving the position of its own relative reference line, and at the same time causing the elements that move relative to the reference line to move. The element itself moves relative to the edge line of the containing-box, and the element that is a brother of the element itself moves relative to the edge line of the element itself. The schematic diagram of the reference line is as shown in the figure. The margin values ​​of the reference line changes in the direction pointed by the arrow are all positive values.

To sum up, we can use margin to move the element itself, and also allow its adjacent elements to move. What we need to know when moving is that the size of the containing-box it is in is also changing.

To sum up, when the width and height of the element are equal to the width and height of the content, the size of its containing-box can be adjusted by adjusting the margin value of the content, because changes in the containing-box will also Causes the movement of the element itself, which means that the element can be moved and the spacing between elements can also be adjusted.

2. The width of the element content is 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 above example, The width of the border-box of the wrap-inner element plus the size of the margin is equal to the width of its containing-box. Therefore, when the containing-box width is fixed, according to the formula 'margin-left' + 'border-left-width' + 'padding-left ' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block, adjusting its own margin-left or margin-right value will make wrap-inner itself The size changes. If margin-left is a positive value and the value gradually becomes larger, the width of wrap-inner itself gradually becomes smaller. If margin-left is a negative value and gradually becomes smaller, the width of wrap-inner itself gradually becomes larger. Margin- Same thing with right. Be sure to note that the width inheritance here is essentially different from width:100%, because width:100% is equal to 100% of its containing-box and has nothing to do with its margin, border or padding. For details, see me The examples in the third article in the series of articles discussing width and height are a bit wordy, but this is where mistakes are easy to make. You must pay attention, you must pay attention, you must pay attention! ! ! . Say important things three times.

Adjust margin-left and right to -10px, as shown in the figure, according to calculation, wrap-inner becomes wider

将margin-left和right调整为10px,如图,根据计算,wrap-inner变窄

综上，当元素宽或高度等于其containing-box的宽度或高度时,且containing-box的宽度固定我们便可以利用margin对其进行自身宽度大小的调整。也就是说宽高度和containing-box有关系时，我们利用margin可进行内里元素大小的调整。

不同元素margin的计算
行内级元素
Inline，非置换元素:如果margin值为auto，则margin-left和margin-right的计算值也就为0
Inline,置换元素:同上
Inline-block,置换元素在文档流中:同上
Inline-block,非置换元素在文档流中:同上
块级元素
块级非置换元素，在文档流中
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
下面的情况下，如果margin值为auto

如果width是auto值，那么其他值是auto的值就为0
如果margin-left和margin-right的值为auto，使用的值相等，那么就相对于包含块水平居中。
块级置换元素，在文档流中
同块级非置换元素一样。

小结
行内级置换元素和非置换元素，在margin值为auto时，margin-left和margin-auto的计算值都为0。
块级置换元素和非置换元素:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
如果width是auto值，那么其他值是auto的值就为0
如果margin-left和margin-right的值为auto，使用的值相等，那么就相对于包含块水平居中。

利用Margin进行布局
通常在布局中我们会遇到那些问题呢？下面是我自己实践中遇到的一些问题

问题1
当我们拿到一份设计稿，然后这份设计稿有像下面这样的布局，整体居中，里面元素排一排，当然布局的方式会有很多种，那么如果我们采用浮动布局或者display:inline-block进行布局会出现什么问题呢，如图我们可以看出，若采用上述两种方式进行布局，那么每个块的宽度加上间隙，就会超出包含块的宽度，当然我们也可以将包含块的宽度进行增大以留下足够的位置供元素摆放，但是这种方法明显是不可取的，那么如何解决这个位置不够的问题呢，可以看下面的栗子1 。

栗子
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;   
}

此布局便利用了原理2，利用负margin增加了inner-wrap的宽度，但不改变整体的宽的情况下，实现效果。如下

问题2
上面的例子仅仅只是实现了三列固定宽度的布局，这样的布局当屏幕宽度发生变化的时候便会出现问题。因此我们便会有如下需求。

左右列固定，中间列自适应

栗子
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;   
}

效果如下,当你缩小屏幕时，中间部分会随着屏幕的缩小而缩小，另外两部分宽度不变，同样也满足了主要内容优先加载的需求，可谓一举两得

分析：

可以看出上面的布局利用了原理2，但是这里仍然会有几个为什么要问。

首先，为什么main里面一定要嵌套main-content,为什么不能直接使用单个main(假设1)？
其次，为什么main上一定要设置float:left，可以设置其他值吗，如position:absolute(假设2)？
分析上面的布局之前，我们也要了解到上面的布局满足了我们的什么需求，这里有两点1.主要内容优先加载。2.主要内容自适应。这里我们可以分析一下，我们是怎样达到上述两个目的的。首先，要达到目的1，我们就的把p.main放在前面来写，因为浏览器是从下到下渲染页面的，放在前面的也就会先渲染。且由于p.main为文档流中的块级元素，因此会独占一行，因此我们需要使其脱离文档流，这样才能使下面的元素能有机会上的来(这里之所以不考虑display:inline-block是因为p.main的长度会独占一行，就算设置display:inline-block也没有任何作用，下面的元素仍然上不来)。而要达到目的2，需要用到原理2。同时在上面提出的两个问题中，有两个假设。

假设1，如果使用单个main可不可以满足上述两个需求？我们可以试试。
html

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

css

body {   
  margin:0;   
}   
/*这里注意需要改掉main的流方式，下面的元素才上的来*/
.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;   
}

从中线分开的黄色两部分为各自为main的左右外边距

从结果中，我们可以看出使用单个main是不行的，因为在不设宽度且元素不在文档流中时，元素的宽度为0，不能满足我们的需求，正因为我们同时要满足1.main元素不在文档流中2.元素不设宽度且在文档流中。这两个条件当然是不能同时在一个main元素下能达到的，因此我们需要再嵌套一个main-content让它来满足条件2。这也就解释了为什么一定要嵌套一个main-content。
解决了问题1，现在我们来说问题2。

假设2,main上的float值可以换为position:absolute吗？
同样的，我们试试
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;   
}

答案是可以的，只是我们需要改掉一些值，而当main为float之所以要给p.left与p.right要设置margin-left值是因为浮动元素浮动时，当它的外边缘碰到包含框或者另一个浮动框的边框为止。而为浮动元素的p.main占据了整整一行，因此下面的浮动元素p.left与p.right便被挤了下来，而设置它们的margin-left值便可以把它们移上去，这里便运用了原理1。而当我们把p.main的float值改为position:absolute时，便不会存在被挤下来的问题，可直接设置p.left与p.right的float的值。效果如下。

如若只需要达到宽度自适应的要求，那么，这时候便可以将p.main放在最后面且不用嵌套p.main-content,具体如何实现，大家可以自己试试。
问题3
如下所示设计稿，在我们进行布局的过程中，可能会出现border重合的情况，因为一方面我们需要对整个整体加上border，而另一方面我们又需要利用border隔开那三个小块。那么如果我们对每个小块都加上右边框，可以想象，最右边就会出现边框的堆叠而这不是我们希望看到的，所以，要如何解决这个问题，可以看如下例子给出的答案。

栗子
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;   
}

没在li上加margin-right:-4px;前,效果如图,发生了堆叠。

加了margin-right: -4px后，达到预期效果。因为加上了ul的右边框发生了移动与第三个li的右边框进行了重叠。因此效果上来看便符合了预期,如图

This layout takes advantage of principle 1 and achieves the desired effect by controlling the position of adjacent elements by elements.
Principle 1 can also be used to achieve a centered layout of the element. First move the element to the upper and left by 50%, and then set the upper and left margin value of the element to half the width of the element itself to move the element itself. . This will achieve the purpose of placing the element in the center.

Summary
1. When the element width is equal to the containing-box width.
You can adjust the width of the element by adjusting the margin value.
2. When the element width has nothing to do with the containing-box.
You can move the position of the element by adjusting the margin value.

The above is the detailed content of A guide to using the margin attribute of CSS in page layout. For more information, please follow other related articles on the PHP Chinese website!