CODEWITHSUNDEEP
htmlcss
user429620
user429620

Reputation:

Gap between images?

See the example here:

http://users.telenet.be/prullen/portfolio.html

I've tried setting my images to display:block -

display: block;
margin: 0;
padding: 0;

but that didn't work.

I also tried adding 

 visiblity:hidden;overflow:hidden;height:0;font-size:1px;line-height:0px

to the 

 <div style="clear:both"></div>

but none of these work.

Does anyone know what the cause may be? If possible, clear:both should stay for IE7 compatibility.

Upvotes: 0

Views: 13436

Answers (8)

Jorge Fuentes Gonz&#225;lez
Jorge Fuentes Gonz&#225;lez

Reputation: 11809

Ok, tested a works.

Remove the clear:both div and set a float style to the first item.

bad:

<div class="item">
    [...]
    <div style="clear:both;"></div>
</div>
<div class="item" style="border:red;">
    [...]
</div>

good:

<div class="item" style="float:left;">
    [...]
</div>
<div class="item" style="border:red;">
    [...]
</div>

Upvotes: 1

tgormtx
tgormtx

Reputation: 322

If the gap you're talking about is the vertical gap between the images, then your problem is the top margin on the <p> in the second .item .description. It's the element giving the gap.

.description p { margin-top: 0 }

Alternately:

<div class="description">
    <p class="first">Description goes here.</p>
</div>

.description .first { margin-top: 0 }

Upvotes: 1

Chris C
Chris C

Reputation: 2013

The <p> tag for the second item is pushing the entire div down by 1 line, because its default top and bottom margins are usually 1em. When you set its margins to zero, then the items will line up right on top of each other. You would want to set <p> or make a class for <p> to margin-top: 0px.

Upvotes: 0

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7445

You should add <div style="clear: both;" /> after your first <div>.

Fixed code

Also you can delete it:

<div style="clear:both;visiblity:hidden;overflow:hidden;height:0;font-size:1px;line-height:0px;"></div>

Upvotes: 0

altschule
altschule

Reputation: 21

Your paragraph tag is what is causing the gap on top and bottom. The default for paragraphs (in chrome) is:

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

simply setting the margin to 0 will fix your problem:

p { margin: 0px; }

Upvotes: 2

Brant
Brant

Reputation: 1788

Do your resets in CSS...

*{ padding: 0; margin: 0; }

Upvotes: 0

alexbusu
alexbusu

Reputation: 741

Quick fix for given page: Add float:left to .item css block.

Upvotes: 0

Brandon Miller
Brandon Miller

Reputation: 2297

Try putting them in a div with a class name '.row', and setting the line height to 0.

HTML:

<div class="row">
    <img src="img1.png" />
    <img src="img2.png" />
    <img src="img3.png" />
</div>

CSS:

.row {
    line-height: 0;
}

Upvotes: 4

Related Questions