CODEWITHSUNDEEP
htmlcss
nkr1pt
nkr1pt

Reputation: 4666

Apply different margins on images in a single div

Please consider the jsfiddle demo where I've laid out 7 cards with transform effects. Now I would like to apply a different margin to individual images such that the card2 is for example 15px lower, card3 is 5px higher etc.

However, when I apply for example margin-top: 15px to card2, all cards in the div are rendered with margin-top: 15px

Another issue is that the centered div is not really centered when applying width: 100% to it.

<div class="centered">
<div class="container">
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card1" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card2" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card3" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card4" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card5" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card6" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card7" />
</div>
</div>

http://jsfiddle.net/kristofvhren/wtDE4/

Upvotes: 0

Views: 92

Answers (2)

nsthethunderbolt
nsthethunderbolt

Reputation: 2097

Try this: Remove inline-block property from images and use 

img {
    width: 125px;
    display:block;
    float:left;
}

instead..

Upvotes: 1

Sushan
Sushan

Reputation: 3233

Use 'float:left' property in 'img' tag and you can use margin in '.card2'

Upvotes: 1

Related Questions