改变水平可视区域的宽度 Demo-1
  1. 适用于没有设定width/height的普通block水平元素
  2. 只适用于水平方向的尺寸
  3. 可以是负值
margin: 50px 0
改变水平可视区域的宽度 Demo-2

一侧定宽的自适应布局

float: left

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, corporis sint incidunt molestiae illo in voluptatem numquam nisi officiis hic officia tenetur quaerat harum! Voluptatum quas recusandae modi sapiente molestias! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam amet praesentium impedit iste, voluptatibus ea nostrum inventore nisi, officia quasi accusantium quaerat fugiat exercitationem. Veritatis ad iure nulla tenetur unde. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis at rerum dolor, molestiae voluptatem repellat obcaecati reprehenderit magni, sint autem soluta, esse voluptas aliquam officia ullam! Perspiciatis mollitia a nulla. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur deserunt inventore neque, unde pariatur distinctio officiis deleniti accusamus error ipsum, quasi harum ratione dignissimos delectus quidem, omnis reiciendis voluptates quia.

改变垂直占据尺寸 Demo-1
  1. block/inline-block水平元素均适用
  2. 与有没有设定width/height无关
  3. 适用于水平和垂直方向
margin: 50px 0
改变垂直占据尺寸 Demo-2

添加滚动留白

测试文本测试文本测试文本测试文本
测试文本测试文本测试文本测试文本
margin: auto

利用流动性，自适应对齐。

margin 百分比

无论水平还是垂直，均是根据宽度计算

margin 重叠

margin重叠通常特性

  1. block水平元素（不包括float和absolute元素）
  2. 不考虑 writing-mode，只发生在垂直方向（margin-top/margin-bottom）

margin重叠3种情景

  1. 相邻的兄弟元素
  2. 父级和第一个/最后一个子元素
  3. 空的block元素
margin 重叠: 相邻的兄弟元素

A

B

C

margin 重叠: 父级和第一个/最后一个子元素
inner
inner
inner

父子margin-top重叠条件

  1. 父元素非块状格式化上下文
  2. 父元素没有border-top设置
  3. 父元素没有padding-top设置
  4. 父元素和第一个子元素直接没有inline元素分隔

父子margin-bottom重叠条件

  1. 父元素非块状格式化上下文
  2. 父元素没有border-bottom设置
  3. 父元素没有padding-bottom设置
  4. 父元素和最后一个子元素直接没有inline元素分隔
  5. 父元素没有height, min-height, max-height限制
margin 重叠: 空的block元素

空的block元素margin重叠条件

  1. 元素没有border设置
  2. 元素没有padding设置
  3. 元素里面没有inline元素
  4. 没有height或者min-height
再看margin重叠

margin重叠规则

  1. 正正取最大
  2. 正负值相加
  3. 负负取最负

为什么有设计margin重叠？

  1. 连续段落或列表之类，如果没有margin重叠，首尾前后的间距会和其他兄弟标签1:2的关系。排版不自然
  2. 空的p标签，不影响原来的排版
  3. 让单个block元素排版更健壮（上下margin都使用）
  4. 嵌套或直接放入任何裸div，不会影响原来的布局