IE6 renders spacing even when margin and padding are zero
I've created this contrived example to illustrate my problem. There are two paragraphs with a div in between. The div's height and line-height have been set to 0 and all margins are also 0. I would expect for the two paragraphs to be right next to each other without any spacing from the div at all, however this is not the case in IE6. It seems to work fine in all other browsers.
Here is the HTML with all styles inlined:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Test</title>
</head>
<body>
<div id="container" style="border: 1px solid blue;">
<p style="margin: 0;">
Some text
</p>
<div style="height: 0; line-height: 0; margin: 0; border: 1px solid red;">
</div>
<p style="margin: 0; border: 1px solid green">
Should be right below "Some text"
</p>
</div>
</body>
</html>
I've added in a few borders just so you can more easily see what's going on.
Here's a screenshot of what's happening in IE6:
Any ideas on how I 开发者_如何转开发can get rid of that little space between the bottom of the div (red) and the top of the paragraph (green)?
Add font-size:0; to the div. That should remove the space
I believe the "p" tag automatically adds padding. In your style attributes try adding padding:0; along with the margin:0;
Another thing to try is setting your position to relative, i.e. "position: relative;"
Also make sure you're using a valid doctype: http://www.w3.org/QA/2002/04/valid-dtd-list.html
加载中,请稍侯......
精彩评论