EmWe EmWe - 4 months ago 10
HTML Question

Remove padding from first and last elements in a row

Let's assume there is a website with fixed width. I need to place 3 boxes in it with some space (padding) between the boxes. But I don't need padding on the left and right side.

How can I get rid of it? When I set

padding-left
or
padding-right
to the corresponding boxes, the boxes don't have the same size (width/height) anymore.

Here is my code:



.wrap {
margin: 0 auto;
width: 1024px;
height: 800px;
background-color: yellow;
}

.box {
box-sizing: border-box;
width:33.3%;
height: 200px;
float: left;
padding: 10px;
}

.box-inner {
background-color: grey;
width: 100%;
height: 100%;
}

<div class="wrap clearfix">
<div class="box"><div class="box-inner"></div></div>
<div class="box"><div class="box-inner"></div></div>
<div class="box"><div class="box-inner"></div></div>
<div class="box"><div class="box-inner"></div></div>
<div class="box"><div class="box-inner"></div></div>
<div class="box"><div class="box-inner"></div></div>
</div>




Answer

While all other answers seem to be correct, I would do it using flexbox since it gives you more flexibility on the layout. Flexbox has a special property for that called justify-content and the value you want to assign to it is space-between.

.wrap {  
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      align-content:flex-start;
      margin: 0 auto;
      width: 1024px;
      height: 800px;
      background-color: yellow;
    }

.box {
    box-sizing: border-box;
    width:calc(33.3% - 5px);
    margin-bottom:5px;
    height: 200px;
}

.box-inner {
    background-color: grey;
    width: 100%;
    height: 100%;
}

JSFiddle

Comments