CSS属性学习:(四)外补白-Margin

marginmargin-topmargin-rightmargin-bottommargin-left

margin


类型: Margin

默认值: 看每个独立属性

取值: <length> | <percentage> | auto

适用于: 所有元素,除非 table | inline-table | table-caption 的表格类元素之外

取值

  • auto水平(默认)书写模式下,margin-top/margin-bottom计算值为0,margin-left/margin-right取决于可用空间。详见:margin系列之keyword auto
  • <length>:用长度值来定义外补白。可以为负值
  • <percentage>:用百分比来定义外补白。水平(默认)书写模式下,参照其包含块 width 进行计算,其它情况参照 height ,可以为负值

margin折叠常规认知:

  • margin折叠只发生在块级元素上
  • 浮动元素的margin不与任何margin发生折叠
  • 设置了属性overflow且值不为visible的块级元素,将不与它的子元素发生margin折叠
  • 绝对定位元素的margin不与任何margin发生折叠
  • 根元素的margin不与其它任何margin发生折叠

demo

See the Pen mAbpam by yrq110 (@yrq110) on CodePen.


margin-top


类型: Margin

默认值: 0

取值: <length> | <percentage> | auto

适用于: 所有元素,除非 table | inline-table | table-caption 的表格类元素之外

取值

  • auto水平(默认)书写模式下,其计算值为0
  • <length>:用长度值来定义外补白。可以为负值
  • <percentage>:用百分比来定义外补白。水平(默认)书写模式下,参照其包含块 width 进行计算,其它情况参照 height ,可以为负值

demo

See the Pen kkNvqm by yrq110 (@yrq110) on CodePen.


margin-right


类型: Margin

默认值: 0

取值: <length> | <percentage> | auto

适用于: 所有元素,除非 table | inline-table | table-caption 的表格类元素之外

取值

  • auto水平(默认)书写模式下,其计算值为0
  • <length>:用长度值来定义外补白。可以为负值
  • <percentage>:用百分比来定义外补白。水平(默认)书写模式下,参照其包含块 width 进行计算,其它情况参照 height ,可以为负值

demo

See the Pen xEKpNG by yrq110 (@yrq110) on CodePen.


margin-bottom


类型: Margin

默认值: 0

取值: <length> | <percentage> | auto

适用于: 所有元素,除非 table | inline-table | table-caption 的表格类元素之外

取值

  • auto水平(默认)书写模式下,其计算值为0
  • <length>:用长度值来定义外补白。可以为负值
  • <percentage>:用百分比来定义外补白。水平(默认)书写模式下,参照其包含块 width 进行计算,其它情况参照 height ,可以为负值

demo

See the Pen ALBjRJ by yrq110 (@yrq110) on CodePen.


margin-left


类型: Margin

默认值: 0

取值: <length> | <percentage> | auto

适用于: 所有元素,除非 table | inline-table | table-caption 的表格类元素之外

取值

  • auto:水平(默认)书写模式下,其计算值取决于可用空间
  • <length>:用长度值来定义外补白。可以为负值
  • <percentage>:用百分比来定义外补白。水平(默认)书写模式下,参照其包含块 width 进行计算,其它情况参照 height ,可以为负值

demo

See the Pen PGowjb by yrq110 (@yrq110) on CodePen.


示例代码来自Joy Du

文章目录
  1. 1. margin
    1. 1.1. 取值
    2. 1.2. margin折叠常规认知:
    3. 1.3. demo
  2. 2. margin-top
    1. 2.1. 取值
    2. 2.2. demo
  3. 3. margin-right
    1. 3.1. 取值
    2. 3.2. demo
  4. 4. margin-bottom
    1. 4.1. 取值
    2. 4.2. demo
  5. 5. margin-left
    1. 5.1. 取值
    2. 5.2. demo
|