White space between elements

**bokosr** · 02-06-2008, 03:44 PM

Hi everyone,

Here is my problem

Code:

    <div id="header">
          <img src="images/header_top.jpg" alt=" " />
	<img src="images/header_bottom.jpg" alt=" "  />
    </div>

this will generate a white space (~2px), between the two pic in every browser.

Code:

<div id="header"><img src="images/header_top.jpg" alt=" " /><img src="images/header_bottom.jpg" alt=" "  /></div>

this one will not generate a white space ??
The only difference is that in the first after the first img i press "enter" and "tab" so i can make my code more readable.
I tried with just "enter" without the indent .... same white space between the pics!

My editor is DreamWeaver CS3.

#header margin and padding are 0
#header img margin and padding are 0 too

Pls how to fix it? I cant type all my code on one line

Tnx iin advance

**jscheuer1** · 02-06-2008, 05:02 PM

It isn't clear to me whether you are talking about horizontal or vertical space.

The image tag by default is an inline element. As such, it is a lot like typing out text. Any one white-space character between characters (tags in this case) is interpreted as a space, all others are ignored.

Additionally, in a standards compliant browser under strict mode, all images with their default display of inline reserve a small bit of layout space at the bottom. This is because all inline elements are expected to fit the 'contains text' model of a span tag, where space is reserved for the tails on letters like g, q, j, etc.

You don't have to type all of your code on one line, but for images that touch horizontally, you can break the line within the tag:

Code:

    <div id="header">
          <img src="images/header_top.jpg" alt=" "
	 /><img src="images/header_bottom.jpg" alt=" "  />
    </div>

or use style (for side by side images one possible method is):

Code:

#header img {
display:block;
float:left;
}
#header div {
clear:left;
}

Code:

    <div id="header">
          <img src="images/header_top.jpg" alt=" " />
	<img src="images/header_bottom.jpg" alt=" " />
        <div></div>
    </div>

for images that are one above the other touching vertically (as is implied by their names):

Code:

#header img {
display:block;
}

Code:

    <div id="header">
          <img src="images/header_top.jpg" alt=" " />
	<img src="images/header_bottom.jpg" alt=" "  />
    </div>

**bokosr** · 02-06-2008, 05:28 PM

Ok, will try it now.
If it doesnt work i will post a link to the page and a screen print with my problem.

Tnx

**bokosr** · 02-06-2008, 05:33 PM

That fix my problem. But still i whould like to know what a more experienced users think about the code.

http://brfk.org/work/index.html
http://brfk.org/work/styles.css

**jscheuer1** · 02-06-2008, 05:55 PM

Both your style and markup pass the respective W3c validators. The look of the page varies slightly between FF and IE 7, but that doesn't appear to be problematic - no gaping spaces or loss of content.

The source code is organized and neatly written.

I cannot read the language, so cannot comment upon the functional clarity of the links or of the content.

The images are pleasant looking and evoke a feeling of 'something organized and good for dogs' to me, and probably most people will get that.

**bokosr** · 02-06-2008, 06:09 PM

10x a lot for the comment. I have some more work to finish it. Will repost again when done.
About the language its bulgarian and the site is about a dog organization.

Good Luck to all.
Tnx again to jscheuer1