cant remove image padding

[zang8027]

I have 4 images side by side and i want them to bump right up against each other but for some reason, even though i have padding:0  margin:0, they still have a margin.

 

<div id="footer">
<a href="index.php" onmouseover="roll('sub_but', 'images/sub-home-btn-over.png')" onmouseout="roll('sub_but', 'images/sub-home-btn.png')"><img src="images/sub-home-btn.png" alt="home" name="sub_but"/></a>

<a href="pieces.php" onmouseover="roll('sub_but2', 'images/sub-pieces-btn-over.png')" onmouseout="roll('sub_but2', 'images/sub-pieces-btn.png')"><img src="images/sub-pieces-btn.png" alt="pieces" name="sub_but2"/></a>

<a href="resume.php"><img src="images/sub-resume-btn.png" alt="resume"/></a>
<a href="contact.php"><img src="images/sub-contact-btn.png" alt="contact"/></a>

 

*
{
margin: 0;
padding: 0;	
font-family:  Arial,   sans-serif;
border: 0px;
}

[haku]

Images can't have padding. They can however have margins. It could also be the <a> tags that have the margins/paddings.

 

You have set everything to have no margins and paddings with that selector, but the star selector is quite weak, and is most likely being overridden by something else.

 

Install the firebug plugin on firefox, and inspect the images and <a> tags, and you will be able to find out where your margins/paddings are coming from.

[zang8027]

i was able to fix it by floating those img tags left

[soycharliente]

Both margin and padding can be applied to the img tag. It's easiest to see what happens when you give the image a border. Try these two lines and watch what happens:

img { margin: 5px; border: 1px solid #999; }

img { padding: 5px; border: 1px solid #999; }

 

I believe your issue to be caused by the links being on different lines. HTML will interpret the links on different lines as ultimately one single character space between each. If you want the images to appear directly next to each other, when you finish the first link, do not go to the next line or type a space character, simply start the next link.

 

No:

<a href="#"><img src="file1.jpg" alt="" /></a>
<a href="#"><img src="file3.jpg" alt="" /></a>

 

Yes:

<a href="#"><img src="file1.jpg" alt="" /></a><a href="#"><img src="file2.jpg" alt="" /></a>

 

Floating will achieve the same outcome. Be sure to clear the following element.