css 添加列之间的间距

Question

我有四列，我试图在它们之间添加空间，但是当我将填充放入 css 中时，列仍然很接近，并且填充是在列内添加的。我究竟做错了什么。

/* Create four columns of equal width */
.columns {
    float: left;
    width: 25%;
    padding: 8px 10px;
    opacity: .8;
    background-color: grey;
    border: 2px solid #eee;
    text-align: center;
    box-sizing: border-box;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

        <div class="columns">
          <%= image_tag("sign-up.ico", align: "center", class:"ico") %>
          <h5>Sign-Up</h5></br>
          <p>Create A <u>FREE</u> Account to make rent payments to your landlord</p>
        </div>

        <div class="columns">
          <%= image_tag("cash_wallet.ico", class:"ico") %>
          <h5>Make your rent payments</h5></br>
          <p>Make rent payments thru your LikeHome account & we report history to all 3 credit bureaus</p>
        </div>

        <div class="columns">
          <%= image_tag("piggy_bank.ico", align: "center", class:"ico") %>
          <h5>Pay a little extra</h5></br>
          <p>You choose an additional payment amount (as low as $25 per month) to be drafted with your rent that goes into escrow</p>
        </div>

        <div class="columns">
          <%= image_tag("handshake.ico", align: "center", class:"ico") %>
          <h5>Get qualified</h5></br>
          <p>The extra money will be held by LikeHome and when ready, we will notify you that you qualify for a mortgage. Use your down payment savings to buy!</p>
        </div>

Answer 1

2022 年 2 月更新

该grid-column-gap属性已弃用。您现在应该使用column-gap.

__

使用 CSS Grid 可能会有更好的体验。使用类似的属性调整列之间的间距grid-column-gap似乎比使用更直观margin。关于该fr单元，来自CSS Tricks：

fr 单位允许您将轨道的大小设置为网格容器可用空间的一部分。

.column {
  background-color: gray;
  padding: 1em 2em;
  text-align: center;
}

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

<div class="grid">
  <div class="column">column data</div>
  <div class="column">column data</div>
  <div class="column">column data</div>
  <div class="column">column data</div>
</div>