跳到主要内容

空间

HTML 空白元素

  • <br/> 换行

  • <hr/> 分隔线

边距设置

外边距

​设置 margin 属性的参数顺序:​

  • 四值:上 右 下 左(顺时针)

  • 三值:上 内联流 下

  • 两值:块流 内联流

可以使用负值来与别的元素覆盖,或使用 auto 值来自动分配可用空间。

外边距重叠

一般情况下会发生两个元素的 margin 重叠( collapse )。

比如,如果上一个元素的底部 margin2rem,下一个元素的顶部 margin3rem,则两个元素之间间隙会取最大值 3rem

可以用 flexbox 等布局取消这一特性。

元素定位

  • static :会忽视 toprightbottomleft 值。

  • relative :相对于元素自身在文档流的位置,不脱离文档流。

  • absolute :相对于父元素,脱离文档流。

  • fixed :会固定在视窗上,四距值会基于视窗。

  • sticky :在滚动的时候会驻留在页面上。

inset 属性是 toprightbottomleft 的合写。

物品间间隔

在 grid 和 flexbox 中可以用 gaprow-gapcolumn-gap 来设置间隔。


参考

Spacing,Learn CSS - web.dev

HTML 字符实体