新的边距属性 CSS 2021

最近CSS出了一些新的边距属性，这些属性在布局UI元素时非常有用。下面我们来介绍一下这些新的边距属性。

gap属性

gap属性用于设置元素之间的间距。这个属性一般用于布局栅格或者网格布局中。该属性直接应用于子元素上，而不是父元素。

语法如下：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

该属性可以取一个或多个参数，分别对应行和列的间距。如下所示：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 20px;
}

row-gap属性

row-gap属性可以设置元素之间的纵向间距。它只能在网格布局中使用，而且只应用于行之间。

语法如下：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px;
}

column-gap属性

column-gap属性可以设置元素之间的横向间距。它只能在网格布局中使用，而且只应用于列之间。

语法如下：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
}

padding-inline-start和padding-inline-end属性

padding-inline-start 和 padding-inline-end 属性用于设置元素的内联起始和结束端的填充。这两个属性主要用于处理RTL布局。

语法如下：

p {
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

margin-inline-start和margin-inline-end属性

margin-inline-start 和 margin-inline-end 属性用于设置元素的子元素内联起始和结束端的外边距。这两个属性同样也用于处理RTL布局。

语法如下：

p {
  margin-inline-start: 20px;
  margin-inline-end: 20px;
}

综上所述，CSS的新的边距属性有助于更快更准确地处理UI布局。它也可以使得我们更容易地处理RTL布局。