当具体设置为 0 时,Border/Margin/Padding 不为 0

发布于 2024-12-11 16:03:48 字数 1327 浏览 0 评论 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

幻梦 2024-12-18 16:03:48

空白位于您的标记中。

即使您将 a 元素设置为 inline-block(默认情况下并非如此),您仍然会看到 HTML 中存在的(标准化)空间。

为了消除这种情况,您必须将这些元素相互“对接”。

更新:您的文件现在应该如下所示:

<!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>

我已经在 Chrome、Firefox 6 和 IE 8 中检查过,链接之间没有空格。

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.

日暮斜阳 2024-12-18 16:03:48

这是因为基本上您只是添加一个空格。 Div 是一个块元素,而 a 是一个内联元素,所以基本上两个内联元素都是有间隔的。

请记住,浏览器会解释空格。

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.

蝶…霜飞 2024-12-18 16:03:48

这是因为 HTML 中的新行在渲染时会被解释为空格。

试试这个:

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

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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文