Detailed explanation of the margin attribute of css-JS Tutorial-php.cn

As front-end dogs, we have to deal with web pages every day. When the UI sends you a design draft, knowledge of CSS is particularly important. However, CSS, a markup language, often gives me a headache: it has no logic and is full of all kinds of hidden rules. So every time I work on a project, most of my time and energy are wasted on adjusting the layout and layout. In terms of style, for details, please click on Why is CSS so difficult to learn on Zhihu?

Text

margin can be regarded as a strong-willed attribute. Below, I will explain the scary aspects of margin from various aspects.

Influence of element size

Usually the size of an element can be divided into: visible size and occupied size

Visible size-clientWidth (border - padding - size)
Occupied size - outerWidth (border - margin)

Detailed explanation of the margin attribute of css

How does margin affect these two sizes?

First of all, both sizes need to meet certain conditions.

Influence conditions of visual size

Applicable to block-level elements that do not have width/height set (width and height are set to death, how can it be affected?)
Does not include float absolute fixed elements, inline horizontal, table-cell elements
Only applicable to horizontal dimensions (margin-left/margin-right)

Influence conditions of occupying size

Applies to block/inline-block horizontal elements
Applies to any direction
It has nothing to do with the width/height value
The inline element only affects the horizontal direction (will be mentioned later)

Influence example

margin affects the visual horizontal size of the element
Margin's visual size example
margin affects the occupied size, This can be said to be the natural skill of margin, so I won’t give an example.

Percent unit

Generally speaking, among the units of margin, the percentage unit is the most likely to make people dizzy.

The percentage margins of ordinary elements are calculated relative to the width of the container

<style>
  #parent {
  margin: 20px 400px;
  width: 100px;
  height: 200px;
}
#child {
  /* 等价于 margin: 5% * 父元素的宽度  10% * 父元素的宽度; */
  margin: 5% 10%;
  /* 父元素的宽度 * 50% */
  width: 50%; 
  /* 父元素的高度 * 50% */
  height: 50%;
}
</style>
<p id="parent">
  <p id="child"></p>
</p>

Copy after login

The percentage margin of absolute positioning It is calculated relative to the width of the first ancestor element with positioning attribute (relative/absolute/fixed)

<style>
  #parent {
  width: 100px;
}
#child {
  /* 注意子元素已增加绝对定位，则百分比按照定位属性的祖先元素的宽度计算，
    本例中是浏览器视口 */
  position:absolute; 
  /* 等价于 margin: 5% * 父元素的宽度  10% * 父元素的宽度; */
  margin: 5% 10%;
}
</style>
<p id="parent">
  <p id="child"></p>
</p>

Copy after login

Overlap details

Overlap is the most important unspoken rule in margin.

What happens

Adjacent sibling elements
Parent and first/last child element
Empty block-level elements (self and self)

Overlapping conditions

Block-level elements ( Excluding float and absolute elements)
Does not consider writing-mode, only occurs in the vertical direction (margin-top/margin-bottom)
Parent-child overlap condition

margin-top overlap
margin-bottom overlap

The parent element's non-formatting context element has no overflow:hidden setting
The parent element has no border-bottom setting
The parent element has no padding-bottom setting
There is no inline element separation between the parent element and the first child element
The parent element has no height, min-height, max-height restrictions
Parent element non-formatting context element is not set overflow:hidden
Parent element has no border-top Set
The parent element has no padding-top. Set
There is no inline element separation between the parent element and the first child element

Empty block-level element margin overlap condition

1. 元素没有 border 设置
2. 元素没有 padding 设置
3. 里面没有 inline 元素
4. 没有 height，或者 min-height

Copy after login

Calculation rules

Taking the largest positive value

<style>
#top{
  margin-top:30px;
}
#bottom{
  margin-bottom:20px;
}
</style>
<p id="bottom"></p>
<p id="top"></p>
两个元素垂直距离为 : #top元素的 margin-top值

Copy after login

Add positive and negative values

<style>
 #top{
  margin-top:-30px;
}
#bottom{
  margin-bottom:20px;
}
</style>
<p id="bottom"></p>
<p id="top"></p>
两个元素垂直距离为: #top元素的margin-top值 加上 #bottom元素的margin-bottom值

Copy after login

negative most negative value

<style>
#top{
  margin-top:-30px;
}
#bottom{
  margin-bottom:-20px;
}
</style>
<p id="bottom"></p>
<p id="top"></p>
两个元素垂直距离为 : #top元素的 margin-top值

Copy after login

Parent The level overlaps with the first/last child element
Setting a vertical margin for the child element is equivalent to setting the same vertical margin attribute for the parent element.
That is to say, when the margin of the parent and child elements overlaps , they both share a margin attribute

Overlapping meaning

Continuous paragraphs or lists, etc., if there is no margin overlap, the layout will be unnatural.
Nesting or directly placing any empty p anywhere on the page will not affect the original layout.
Missing any number of empty p elements will not affect the original reading layout.

margin auto

When you use margin auto, you should think of one word: fill

A block-level element without set width and height will automatically fill the width
If one side is a fixed value and one side is auto, then auto is the size of the remaining space

If both sides are auto, then the remaining space will be divided equally

The example is as follows:

<style>
#demo{
  width: 500px;
  margin-right:100px;
  /* margin-left: 100vw - margin-right - width*/
  margin-left:auto;
}
</style>
<p id="demo"></p>

Copy after login

margin:auto 0 !== 垂直居中

以上，我们可得当一个块级元素设置了 margin: 0 auto 可以实现水平居中，

而为什么 margin:auto 0 不会垂直居中？

答：一个块级元素会自动填充可用的水平尺寸，但不会填充垂直尺寸，是因为其根本没有任何可用的垂直空间。也就是说 margin: 0 auto , 总是有尺寸可以来填充的！而 margin: auto 0 是没有任何尺寸的可以来填充的。

失效情况

当子元素的宽度大于父元素的宽度，是无法通过 margin: 0 auto 实现居中的
因为，这个时候已经没有任何空间可以填充了，当宽度超出父元素时，margin 已经为负值了。

垂直居中

writing-mode 与垂直居中

<style>
.father{
  writing-mode: vertical-lr;/* 更改流的方向为 垂直方向 */
}
.son{
  margin: auto;
}
</style>
<p class="father">
  <p class="son"></p>
</p>

Copy after login

绝对定位元素

<style>
.parent{
  position: relative;
}
.child{
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin:auto;
}
</style>
<p class="parent">
  <p class="child"></p>
</p>

Copy after login

失效情景

inline 水平元素的垂直margin 无效（margin-top/margin-bottom）
margin 重叠发生
绝对定位元素非定位方位的 margin值 "无效"
因为绝对定位元素脱离了文档流，与相邻元素没有关系，所以它不可能像普通元素一样，设置margin，推走其他元素
margin 鞭长莫及
因为有某些元素破坏了文档流，设置了 float absolute，造成了假象，margin不会根据这些破坏元素作为标准
display:table-cell/display:table-row 等声明的margin无效！某些替换元素除外，根据各个浏览器的实现方式作为区分。比如，给 button 元素声明 display:table-cell，但在 chrome 中,button 的 display 属性是 inline-block 。
内联特性导致 margin 失效
margin-top: 负无穷，但是，小到 1em 便无效了。
因为它是内联元素，默认是基线对齐，x字母下边缘对齐，margin 值再大，也不会起作用。
margin负无穷情景解析