why extra padding below my images?

**webnick2007** · 09-02-2009 11:12 PM

Could someone advise me on why I’m getting this extra padding... just below images in the header?!

The css is written from scratch except for the reset style sheets from Yahoo’s UI. There shouldn’t be anything unusual there though. Nothing looks like padding or margin in the computed style from Google Chrome. The 2pixels of white space still shows below images when I delete all style sheets in FireBug.

Thanks for any rapid help.

**SeanieC** · 09-03-2009 10:45 AM

Might sound silly, but the image itself doesn't have 2 pixels of white space?

Also, have you set the img to have margin:0;padding:0; just to be sure? - I've never used Yahoo's reset style sheet I tend to reset elements at the beginning of my CSS, but it could be that the browser is automatically adding the space...

oh, just noticed you are using a <br /> - that is likely the reason for the space. Bad practice to use <br /> to position elements on the page, make use of padding and margin.

**webnick2007** · 09-03-2009 03:10 PM

God grief - the <br /> tags did it. Thanks for posting your reply, I thought I checked that!

**SeanieC** · 09-04-2009 02:51 AM

no problems,

Why are you using <br />? I might be able to give you an alternative way to position your images.

**webnick2007** · 09-04-2009 12:15 PM

That would be really handy. Some how, the spacing appeared again?!? Here's what the markup looks like --

Code:

<body class="front logged-in page-node one-sidebar sidebar-right sidebar-right">
<div class="bwrap">
		<div class="head">

				<div class="globnav">
						<div class="left"><img src="/sites/all/themes/gossipgirl-r2/images/front/adler_explore_sketch_05a_03.png" width="489" height="32"></div>
						<div class="right"><img src="/sites/all/themes/gossipgirl-r2/images/front/adler_explore_sketch_05a_06.png" width="89" height="20"> <img src="/sites/all/themes/gossipgirl-r2/images/front/adler_explore_sketch_05a_09.png" width="14" height="14"></div>
				</div>
				<div class="panel">
<img src="/sites/all/themes/gossipgirl-r2/images/front6/header.png" alt="" />
<img src="/sites/all/themes/gossipgirl-r2/images/front6/header-02.png" alt="" />
<img src="/sites/all/themes/gossipgirl-r2/images/front6/header-03.png" alt="" />
<img src="/sites/all/themes/gossipgirl-r2/images/front6/header-04.png" alt="" /></div>

**cfajohnson** · 09-06-2009 06:07 PM

<img> is an inline element that sites on the baseline, leaving space
beneath for descenders.

To get rid of the space, use:

Code:

img { display: block; }

**webnick2007** · 09-07-2009 03:01 PM

Looks like it was the document type deceleration.... Changing from HTML strict to XHTML did it. This time I'm sure! Thanks for the help.

**cfajohnson** · 09-07-2009 09:55 PM

Since MSIE doesn't parse XHTML, changing the doctype doesn't really help, and it could lead to other problems (such as quirks mode).

Thread: why extra padding below my images?

Thread Tools

Display

why extra padding below my images?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions