[分享]css中如何设置相对间距

当设计网站页面的时候，经常需要设置元素之间的间距，而 CSS 中有多种方法可以实现不同类型的间距。其中最常见的三个方法是：外边距（margin）、内边距（padding）和相对定位（relative ...

当设计网站页面的时候，经常需要设置元素之间的间距，而 CSS 中有多种方法可以实现不同类型的间距。其中最常见的三个方法是：外边距（margin）、内边距（padding）和相对定位（relative positioning）。

外边距（margin）

p {
  margin: 10px;
} 

上面的代码表示将所有段落元素的外边距设置为 10 像素。外边距可以接受各种单位，如像素、百分比、em，还可以单独指定四个方向的外边距：

p {
  margin-top: 10px;
  margin-right: 5%;
  margin-bottom: 20px;
  margin-left: 5%;
} 

内边距（padding）

p {
  padding: 10px;
} 

上面的代码表示将所有段落元素的内边距设置为 10 像素。内边距也可以接受各种单位，并且也可以单独指定四个方向的内边距：

p {
  padding-top: 10px;
  padding-right: 5%;
  padding-bottom: 20px;
  padding-left: 5%;
} 

相对定位（relative positioning）

如果需要在元素之间创建间距，但不增加页面的总大小，可以使用相对定位。通过将元素的位置移动，可以在元素之间创建空间：

p {
  position: relative;
  left: 20px;
} 

上面的代码表示将所有段落元素的位置相对于左侧移动 20 像素。可以通过调整方式和值来自定义元素之间的间距。