CODEWITHSUNDEEP
htmlcsspaddingmargin
robobooga
robobooga

Reputation: 513

Border/Margin/Padding not 0 when specifically set 0

I have a simple question where my the stuff in my div are not without margin. Specifically, when set margin, padding and border all to 0, there is still whitespace between elements

Code:

<div id="menu" >
<a href="#" style="margin:0;border:0;padding:0;background:red">sup</a>

<a href="#" style="margin:0;border:0;padding:0;background:red">sup</a>

</div>

Just by adding these codes to an empty text file and saving as html, there is white spaces between the elements, unless I specifically set a negative margin. This would work, but I just want to know why is it not 0 when it is specifically set to 0.

Thanks in advance :D

New finding :

I was trying to make the above into display:block to display one on top of another just when I found out that

upon adding this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

It did not work

I was supposed to use this doctype but it does not work now.

Any solutions?

The code is as follows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<div id="kingmenu"  style="position:absolute;top:90px;left:290px;width:55px;">
<a href="#"><img src="http://white-attic.com/themes/prestashop/img/kingtop.png"></a><a href="#"><img src="http://white-attic.com/themes/prestashop/img/kingbottom.png"></a>
</div>

problem is as shown in this screencap: http://img828.imageshack.us/img828/8331/whitespace.jpg

Upvotes: 2

Views: 4367

Answers (3)

harpo
harpo

Reputation: 43168

The whitespace is in your markup.

Even if you set the a elements to inline-block (which they are not by default), you would still see the (normalized) space that is there in your HTML.

To eliminate this you have to "butt" the elements up against one another.

UPDATE: Your file should now look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<div id="menu" ><a href="#" style="margin:0;border:0;padding:0;background:red">sup</a><a href="#" style="margin:0;border:0;padding:0;background:red">sup</a></div>

I have checked in Chrome, Firefox 6 and IE 8 that there is no space between the links.

Upvotes: 3

MarioRicalde
MarioRicalde

Reputation: 9487

This is because basically you're just adding a space. Div is a block element and a is a inline element, so basically both inline elements are spaced.

Remember that Browser interpret spaces.

Upvotes: 2

animuson
animuson

Reputation: 54739

That's because a new line in HTML is interpreted as a space when it is rendered.

Try this:

<div id="menu" >
<a href="#" style="background:red">sup</a><a href="#" style="background:red">sup</a>
</div>

Upvotes: 1

Related Questions