[分享]css两边留白

CSS 两边留白 CSS 两边留白是指在一个元素内让其左右两侧留出一定的边距。它可以为网页的版面设计提供更多的自由度。在一些简单的布局中，可以使用HTML表格或者非语义化的div来实现，但是在有些布局...

CSS 两边留白
CSS 两边留白是指在一个元素内让其左右两侧留出一定的边距。它可以为网页的版面设计提供更多的自由度。在一些简单的布局中，可以使用HTML表格或者非语义化的div来实现，但是在有些布局中使用CSS 两边留白是一个比较好的选择。
有多种实现CSS 两边留白的方式，下面我们介绍其中两种：
1.使用margin属性来实现
其中的margin属性就是元素的外边距属性，这个属性就是为了控制元素与其它元素的距离的。代码实例如下：

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

这里就是让p标签的左边和右边都留出20px的距离。也可以采用设置margin-left和margin-right的缩写，即：

p {
  margin: 0px 20px;
} 

这样就实现了两边都留白20px的效果。当然，这个空白的距离也可以使用百分比来表示，例如：

p {
  margin: 0px 10%;
} 

这样就是让p标签的左右两侧和当前视口的百分之10处留出留白。值得注意的是，这里的百分比是相对于父元素的宽度。
2.使用padding属性来实现
padding属性则是指元素内部的空白距离，也可以用来实现两边留白。这个属性主要用来控制元素周围的空白区域，因此将padding属性用于两侧留白时需要将它应用于外部容器元素。代码实例如下：

.container {
  padding-left: 20px;
  padding-right: 20px;
} 

这里的.container就是外部容器元素，我们将其左右两侧都留白了20px。同样，padding-left和padding-right也可以合并为缩写形式，如：

.container {
  padding: 0px 20px;
} 

这样就相当于将左右两侧都留白了20px。
总之，我们可以采用margin或者padding属性来实现CSS 两边留白，具体的实现方式可以根据实际需求来选择。在布局中我们需要合理地使用留白，这样可以使网页看起来更加整洁美观。