css 块元素/内联元素的 padding / margin / border / outline 排版规则

padding / margin / border / outline 是 css 日常工作中经常用到的几个属性,而在 html 标签中有两种元素类型:
块元素(占用一行)自动换行 / 内联元素(占用内容)不换行
比如 div 就是块元素、 span 就是内联元素。
那么对于这两种元素类型设置这些属性后会有什么变化呢?
其实我们只需事先记住:内联元素设置的只会影响内联元素、块元素设置的只会影响块元素,然后再结合下面的案例,相信你很快就可以明白是什么意思。

padding

  • 块元素:包含元素尺寸、仅影响所有块元素排版
  • 内联元素:包含元素尺寸、仅影响所有内联元素排版
    在这里插入图片描述

margin

  • 块元素: 不包含元素尺寸、仅影响所有块元素排版
  • 内联元素:不包含元素尺寸、仅影响所有内联元素排版(仅支持左右margin,不支持上下 margin)
    在这里插入图片描述

border

  • 块元素:包含元素尺寸、仅影响所有块元素排版
  • 内联元素:包含元素尺寸、仅影响所有内联元素排版
    在这里插入图片描述

outline

  • 块元素:不包含元素尺寸、不影响所有排版
  • 内联元素:不包含元素尺寸、不影响所有排版
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/cookcyq__/article/details/121845541
今日推荐