删除div之间的空白间隔

Question

我在两个

之间发现了一些奇怪的空白。

每个

都有css属性display:inline-block，并且都有设置的高度和宽度。

我找不到这个空白的来源。

这是一个示例

- Taras Lukavyi

Answer 1

你的空白是因为在div之间存在空白。行内元素之间的空格被解释为空格。

你有：

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div>
<div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

修改为：

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div><div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

然而，这并不是实现你想要的效果的好方法。

如果你想要的是浮动元素，你应该使用float属性来实现。

- Thomas Clayson

---

别担心，我正在为你恢复平衡。 :) - AlexKempton

现在，为了让您的网站在所有设备上完美运行，最好使用％宽度和高度。 - Ali Mohyudin

编辑过了。我的意见（几乎4年前发表的）是在“流体布局”仍然是糟糕的设计选择时发表的。现在，百分比宽度/高度对于响应式网页设计非常有效。 - Thomas Clayson

您真是个传奇！ - Mehdi Souregi

Answer 2

使用：

float:left;
clear:none;  

在两个 `div` 中：

- check123

Answer 3

如果您想保留您的编码布局，请避免使用浮动，并将每个 div 放在自己的单独行上...

<div id="leftSide">这里有一些内容</div><!-- --><div id="rightSide">这里有更多的内容</div>

- fuzzysearch

Answer 4

只需将以下内容添加到您的CSS中。

h1 {
    padding:0;
    margin:0;
   }

之间的空隙只是由于

的边距和填充而产生的。

- user3170223

---

如果您有两个没有填充和边距的div相邻，有两种情况：a）如果HTML被最小化（标签之间没有空格），则div将相邻。b）如果有一个单独的空格/制表符/回车，则浏览器会在这些div之间显示一个小空格。您的答案并未回答用户的问题。我花时间写了一个简短的解释，希望您能理解其中的区别。谢谢！ - besciualex

只需使用 margin: 0; 即可在大多数情况下起作用。除非该元素已经具有填充，否则不需要使用 padding:0;。 - kmoser

Answer 5

这就是解决方法：

<div id="left_side">
    ...
</div><div id="right_side">
    ...
</div>

请注意，右侧的div紧跟左侧div的关闭标签之后开始。这是因为元素之间的任何空格都将成为布局本身中的空格，因为它们现在是内联的。您可以使用两个span元素来模仿此行为。

演示：Demo。

- Purag

Answer 6

你也可以将 display: flex; 添加到 div 的父容器中（在这种情况下，是 body）。Fiddle。

- dodov

---

由于问题涉及到 display: inline-block，我更倾向于建议使用 display: inline-flex。 - Sunny

我支持这个观点，@Sunny - Carl Edwards

Answer 7

最佳方法是将父元素的字体大小设置为0，然后将子元素内部的普通字体大小设置为正常（否则会从父元素继承0）

- gdarcan

Answer 8

将这些语句移到同一行：

</div><div id="right_side">

- Derek Tomes

Answer 9

将两个元素都向左浮动，同时将30%的宽度调整为40%以填满所有空间，但这并非必要。请注意，“inline-block”不受IE7支持，但可以通过解决方法进行修复。

http://jsfiddle.net/RVAQp/3/

- AlexKempton

---

当然，这是另一种选择。不过需要注意的是，浮动元素应该被清除。 - Purag

好的观点，但实际上并没有回答楼主的问题。这只是一个应该放在问题下面的评论，而不是一个答案。 - Thomas Clayson

你完全正确，我在这件事上有点错过了重点。 - AlexKempton

Answer 10

不知道原因，但我通过在相关DIV样式语句中添加border: 1px solid red;(垂直)和float: left;(水平)，并删除空格解决了这个问题。

- Rajesh Kannojiya