css add spacing between columns

Issue

I have four columns and I am trying to add space between them but when I put padding into the css the columns are still close and the padding is added within the columns. What am I doing wrong.

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

Solution

Padding is always added inside elements. While your code is correct and does add padding space inside your element, if you want space in between your elements you will need to add margin.

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

Answered By – Claire

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.