当前位置：文江博客话题详情

div 之间的额外空间从何而来？

发布于 2024-12-19 19:39:12 字数 222 浏览 1 评论 0原文

http://www.lethalmonk6.byethost24.com/index.html

如果您检查firebug “项目链接”div 之间的间距，每个 div 之间添加了几个像素的边距。我将边距设置为 20 px，然后添加这些小位。它从哪里来？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

余生共白头 2024-12-26 19:39:12

您正在使用 display:inline-block 因此元素之间的空白就是您所看到的。您可以删除 div 之间的空白或使用 float: left 代替。

详细说明...如果您使用 display: inline-block 执行以下操作：

<div></div><div></div>

而不是这样做：

<div></div>
<div></div> // White space is added because of the new line

You're using display:inline-block so the white space between the elements is what you are seeing there. You can either remove the white space between the divs or use float: left instead.

To elaborate... if you're using display: inline-block do this:

<div></div><div></div>

Instead of this:

<div></div>
<div></div> // White space is added because of the new line

回复收藏 0 原文

破晓 2024-12-26 19:39:12

正如 Terminal Frost 所说，将 float: left 添加到类中，并删除 display: inline-block。此外，将 content: "." 添加到父 div 容器中，以解决这样做时遇到的换行问题。

回复收藏 0 原文

思念绕指尖 2024-12-26 19:39:12

正如 Lucifer Sam 所说，display:inline-block 将向您显示元素之间的空间（如果有）。

给出的解决方案很好：

<div></div><div></div>

但是对于内容较大的元素，我个人更喜欢这种在 display:inline-block 元素之间没有空格的解决方案。这就是我所做的：

   <div>
       large content
   </div><!-- No space
--><div>
       large content 2
   </div>

As Lucifer Sam said, display:inline-block will show you space between element if there are one.

The slution given is good:

<div></div><div></div>

But for element with large content, i personnaly prefer this solution of not having the white space between display:inline-block elements. This is what i do:

   <div>
       large content
   </div><!-- No space
--><div>
       large content 2
   </div>

回复收藏 0 原文

困倦 2024-12-26 19:39:12

我对这里提供的解决方案不太满意，然后我遇到了一个修复程序，我之前实际上用它来解决这个问题，但忘记了它......

您可能需要的只是简单地添加 font-size : 0; 到父容器（您可以为子容器覆盖此规则，因此它不会破坏您的字体）。

所以，这是一个基本的例子：

<div class="font-zero">
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="inline-block"></div>
</div>

<style>
    .font-zero { font-size: 0; }
    .inline-block { display: inline-block; }
</style>

有了这个例子，你不必担心代码中的标记（就我个人而言，我认为删除代码中的换行符来解决这个问题真的很难看），而且你也不需要使用浮动，由于多种原因这可能不是最佳的。

由于此页面是第一个 Google 结果，我希望下次遇到此问题时能到达这里并忘记简单的修复...也许它对其他人也有用:)

I wasn't quite happy with the provided solutions here and then I came across a fix that I actually was using to address this issue before, but forgot about it...

All you might need is to simply add font-size: 0; to the parent container (you can overwrite this rule for the children, so it shouldn't break your fonts).

So, here's a basic example:

<div class="font-zero">
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="inline-block"></div>
</div>

<style>
    .font-zero { font-size: 0; }
    .inline-block { display: inline-block; }
</style>

With that example you don't have to worry about the markup in your code (personally, I think removing line breaks in the code to solve this issue is really ugly) and also you don't need to use floating, which might be not optimal for many reasons.

Since this page was the first Google result, I hope I'll get here next time I come across this issue and forget the easy fix... And maybe it would be useful for someone else too :)

回复收藏 0 原文