CODEWITHSUNDEEP
htmlcsscss-selectors
EmWe
EmWe

Reputation: 189

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>

Upvotes: 4

Views: 10638

Answers (5)

Michael Benjamin
Michael Benjamin

Reputation: 371261

Assuming you don't want to alter the box model (flexbox provides several options to solve this problem), here are two selector combinations:

This works on a single line container. The number of items per row doesn't matter:

.box + .box { padding-left: 10px }

Using the adjacent sibling selector, apply the padding to all .box elements immediately preceded by a .box element.

Hence, the first item will not have left padding, and the last item will not have space on the right.

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

.box + .box { padding-left: 10px; }  /* new */

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

This works on both single and multi-line containers, with three items per row:

.box:not(:nth-child(3n+1)) { padding-left: 10px; }

Apply the padding to all elements except (:not) every fourth, starting with the first.

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

.box:not(:nth-child(3n+1)) { padding-left: 10px; }  /* new */

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

Upvotes: 1

Daemeron
Daemeron

Reputation: 866

You would need to use :last-child and :first-child or even perhaps :nth-child pseudo element for styling and use CSS calc function to make sure you subtract padding from percentage width.

Upvotes: 1

otinanai
otinanai

Reputation: 4025

I would use the following CSS:

.box {
    padding-left: 10px;
}
.box:nth-child(3n+1) {
    padding-left: 0;
}

This will hide padding from the first element and every 4th one. Since the padding is on the left, every element on the right side will not have right padding.

Here's the demo.

Upvotes: 3

dev7
dev7

Reputation: 6369

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

Upvotes: 3

DirtyRedz
DirtyRedz

Reputation: 566

Use .box:nth-child to give the middle box's no padding, and have no bottom padding on any of the box's.

.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 10px 0 10px;
}

.box:nth-child(2),
.box:nth-child(5) {
  padding-left: 0;
  padding-right: 0;
}

.box-inner {
  background-color: grey;
  width: 100%;
  height: 100%;
}
<body>
	<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>
</body>

Upvotes: 0

Related Questions