当具体设置为 0 时,Border/Margin/Padding 不为 0
我有一个简单的问题,我的 div 中的内容不是没有边距。 具体来说,当将 margin、padding 和 border 全部设置为 0 时,元素之间仍然存在空格
代码:
<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>
只需将这些代码添加到空文本文件并另存为 html,元素之间就会存在空格,除非我专门设置负数利润。这可行,但我只是想知道为什么当它专门设置为 0 时它不是 0。
提前感谢:D
新发现:
我试图将上面的内容放入 display:block 中,以将一个显示在另一个之上当我发现
添加此内容后:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
它不起作用
时,我应该使用此文档类型,但它现在不起作用。
有什么解决办法吗?
代码如下:
<!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>
问题如截图所示: http://img828.imageshack.us/img828/8331/whitespace.jpg
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
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
空白位于您的标记中。
即使您将
a
元素设置为inline-block
(默认情况下并非如此),您仍然会看到 HTML 中存在的(标准化)空间。为了消除这种情况,您必须将这些元素相互“对接”。
更新:您的文件现在应该如下所示:
我已经在 Chrome、Firefox 6 和 IE 8 中检查过,链接之间没有空格。
The whitespace is in your markup.
Even if you set the
a
elements toinline-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:
I have checked in Chrome, Firefox 6 and IE 8 that there is no space between the links.
这是因为基本上您只是添加一个空格。
Div
是一个块元素,而a
是一个内联元素,所以基本上两个内联元素都是有间隔的。请记住,浏览器会解释空格。
This is because basically you're just adding a space.
Div
is a block element anda
is a inline element, so basically both inline elements are spaced.Remember that Browser interpret spaces.
这是因为 HTML 中的新行在渲染时会被解释为空格。
试试这个:
That's because a new line in HTML is interpreted as a space when it is rendered.
Try this: