Question

我有四列，我正在尝试在它们之间添加空格但是当我将填充放入css时，列仍然关闭，并且在列中添加了填充。我做错了什么。

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 1

填充总是添加到元素内部。虽然您的代码是正确的，并且确实在元素中添加了填充空间，但如果您想在元素之间添加空格，则需要添加边距。

.element {
margin:0 2.5%;
width:20;
}

Answer 2

使用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>

css在列之间添加间距

2 个答案: