[分享]css两边有留白

在网页设计中，经常会遇到需要让文字两侧有留白的情况。这时候，我们可以使用CSS来实现。下面，就和大家分享一些实现的方法。 首先，可以考虑使用padding属性。将需要有留白的元素的paddinglef...

在网页设计中，经常会遇到需要让文字两侧有留白的情况。这时候，我们可以使用CSS来实现。下面，就和大家分享一些实现的方法。
首先，可以考虑使用padding属性。将需要有留白的元素的padding-left和padding-right属性值设置成相同的数值，即可实现两侧留白。例如，下面的代码可以让p元素两侧留出20像素宽度的白边：

p {
  padding-left: 20px;
  padding-right: 20px;
} 

如果需要留白的区域更大，也可以将padding设置成百分比单位，例如：

p {
  padding-left: 10%;
  padding-right: 10%;
} 

另外，还可以使用margin属性来实现元素两侧留白的效果。将元素的margin-left和margin-right属性值设置成相同的数值即可。例如，下面的代码可以让p元素两侧留出20像素宽度的白边：

p {
  margin-left: 20px;
  margin-right: 20px;
} 

同样地，也可以使用百分比单位来设置margin值。
需要注意的是，在使用padding或margin来实现两侧留白的时候，如果在元素边框的外侧留白，会导致元素的宽度或高度增加，而在元素边框的内侧留白，则不会对元素的宽度或高度产生影响。
最后，还可以使用伪元素before和after来在元素两侧增加留白。例如，下面的代码可以让p元素两侧分别增加20像素的宽度的白色矩形：

p:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 100%;
  background-color: white;
}
<br>
p:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 100%;
  background-color: white;
} 

以上介绍了几种不同的方式来实现元素两侧留白的效果。大家可以根据自己的需求选择合适的方法。