CODEWITHSUNDEEP
htmlcss
Rrryyyaaannn
Rrryyyaaannn

Reputation: 2597

Add margin between adjacent elements without adding inner margin to parent container

Alright, I can't think of a good way to explain this, so here's a graphic which may help.

I have a 3 column grid of inline-block elements that need to have a margin between themselves. There should not, however, be a margin between the 1st/3rd element of each row and the parent container. Is there a slick way to do this, particularly with CSS? I'm open to any technique that will work.

Marginz

Html is basically this:

<section>
  <article class=“box”>
    <img class="thumb" src="img/image.jpg">
    <p>Name</p>
  </article>
  <article class=“box”>
    <img class="thumb" src="img/image.jpg">
    <p>Name</p>
  </article>
  <article class=“box”>
    <img class="thumb" src="img/image.jpg">
    <p>Name</p>
  </article>
</section>

Upvotes: 0

Views: 300

Answers (1)

j08691
j08691

Reputation: 207923

You could use the nth-child pseudo class to select the third element and remove the margin like:

.box {
    margin-right:10px;
}
.box:nth-child(3n) {
    margin-right:0px;
}

jsFiddle example

Upvotes: 2

Related Questions