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