html - 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 :

The fr unit allows you to set the size of a track as a fraction of the free space of the grid container.

.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>