CSS如此简单：5种添加元素间距方法

前端应用中，我们经常需要处理元素间的距离，看上去更美观。本文介绍5种添加元素间距的方法，当然方法不止5种。

约定

由于CSS样式及应用的复杂性，本文只以ul+li列表来展示和说明。目的是起到抛砖引玉的作用，不是宝典枚举所有情况。5种方法实现的效果都是一致的，如下图所示：

ul的于li元素的边距是10px，li和li的间距也是10px；

方法展示

html代码如下：

<ul class="list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
</ul>

list为基础样式，例子中采用样式叠加的方式。例如方法1，样式list-1，ul的完整样式是list list-1，以此类推。

.list {
    display: inline-flex;
    padding: 10px;
    margin: 0;
    border-radius: 4px;
    background-color: #000;
}
.list li {
    display: inline-flex;
    padding: 10px;
    border-radius: 4px;
    background-color: #4cd23e;
    color: #fff;
}

方法1

• CSS代码

.list-1 li + li {
   margin-left: 10px;
}

• 说明
  采用+选择相邻节点，给相邻节点增加左边距10px。这种方法和我们的思维习惯贴合，好理解。

方法2

.list-2  li:first-child ~ li {
    margin-left: 10px;
}

• 说明
  li:first-child选择第一个li元素，~选择所有的同级元素。用一句话描述：选择第一个li元素的所有同级元素，添加左边距10px。

方法3

• CSS代码

.list-3  li:not(:first-child) {
    margin-left: 10px;
}

• 说明
  使用:first-child选择第一个元素，:not()表示否定逻辑。用一句话描述：选择除第一个元素外的li元素，添加左边距10px。

方法4

• CSS代码

.list-4 {
    padding: 10px 10px 10px 0;
}
.list-4 li {
    margin-left: 10px;
}

• 说明
  ul除左边添加padding10px，li元素都添加左边距10px。

方法5

• CSS代码

.list-5 {
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 10px;
}

• 说明
  使用inline-grid布局模式，grid-auto-flow: column列自动流布局，grid-gap:10px元素的间距为10px。

对比

方法	描述	对比
1	采用+选择相邻节点，给相邻节点增加左边距10px	符合思维习惯
2	选择第一个li元素的所有同级元素，添加左边距10px	选择较复杂
3	选择除第一个元素外的li元素，添加左边距10px	选择较复杂
4	ul除左边添加padding10px，li元素都添加左边距10px。	选择简单，但不符合思维习惯
5	使用inline-grid布局模式，grid-auto-flow: column列自动流布局，grid-gap:10px元素的间距为10px	通过gird-gap控制元素间距，其它4个方法都是控制li的margin-left来实现。

总结

本文使用特定的例子，通过5种添加间距的方法展示，给大家简单直观地，了解CSS选择器和网格布局的应用。大家根据自己的喜好选择方法，或者尝试其它方法。感兴趣的朋友可以下载代码。【点击免费下载】无需积分、VIP和付费