PDA

Click to See Complete Forum and Search --> : Image margins & padding

aklah
07-18-2006, 10:21 AM
Hi

I am tryin to create a series of 4 photo's in a line giving the apperance that they are stitched together at the edges.

I thought this would be just a matter of setting both the margin and padding to zero.

Unfortunately every time i run the code the pictures have a gap between them. Not the desired effect.

Any Suggestions.
The Little Guy
07-18-2006, 10:24 AM
What does you code look like? The CSS and the HTML.
aklah
07-18-2006, 10:38 AM
Here is the cose in question

HTML Code

<body>
<div id="photos">
<img alt="Blue hills (27K)" src="Blue%20hills.jpg" width="25%" />
<img alt="Sunset (69K)" src="Sunset.jpg" width="25%" />
<img alt="Blue hills (27K)" src="Blue%20hills.jpg"width="25%" />
<img alt="Sunset (69K)" src="Sunset.jpg" width="25%" />
</div>
</body>


CSS Code

#photos img{
margin: 0px;
padding:0px;

}
The Little Guy
07-18-2006, 10:41 AM
try removing the line break in the coding, that may be why there is a space.

make all the tags on one line of code

<body>
<div id="photos">
<img alt="Blue hills (27K)" src="Blue%20hills.jpg" width="25%" /><img alt="Sunset (69K)" src="Sunset.jpg" width="25%" /><img alt="Blue hills (27K)" src="Blue%20hills.jpg"width="25%" /><img alt="Sunset (69K)" src="Sunset.jpg" width="25%" />
</div>
</body>
aklah
07-18-2006, 10:46 AM
Good call. Worked well.

I assume this is something to do with how browsers handle what I think is called "white space".
The Little Guy
07-18-2006, 10:50 AM
Yes, it viewed that line return as many spaces, but since HTML only can read and output one space, you saw that little space between the images.
The Little Guy
07-18-2006, 10:52 AM
You also might be able to do it like this (untested):

div{
float:left;
}
.images{
float:left;
}

<div>
<img class="images" alt="Blue hills (27K)" src="Blue%20hills.jpg" width="25%" />
<img class="images" alt="Sunset (69K)" src="Sunset.jpg" width="25%" />
<img class="images" alt="Blue hills (27K)" src="Blue%20hills.jpg"width="25%" />
<img class="images" alt="Sunset (69K)" src="Sunset.jpg" width="25%" />
</div>