Question

我在两个div之间得到了一些奇怪的空白。

每个div都有css属性display: inline-block，每个div都有一个设置的高度和宽度。

我无法找到空白的位置。

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>

然而，这是做你想做的事情的坏方法。

如果你想做什么，你应该浮动元素。

Answer 2

使用：

float:left;
clear:none;

同时div

Answer 3

如果你想保留你的编码格式，请避免使用浮点数并将每个div保留在它自己的行上......

<div id="leftSide">Some content here</div><div id="rightSide">Some more content here</div>

Answer 4

这就是诀窍：

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

注意右侧div如何在左侧div的结束标记之后立即启动。这是有效的，因为元素之间的任何空间，因为它们现在是内联的，将成为布局本身的空间。您可以使用两个span元素镜像此行为。

Demo

Answer 5

只将其添加到您的CSS

h1 {
    padding:0;
    margin:0;
   }

div之间的空格仅归因于h1 Margin和Padding

Answer 6

将剩下的两个元素浮动，也使30％宽度变为40％以填充所有空间，但这不是必需的。请注意，IE7不支持“inline-block”，但可以通过解决方法修复。

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

Answer 7

将这些陈述移到同一行：

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

Answer 8

最好的方法是将父元素的font-size设置为0，然后将正常字体大小设置为该父元素内的子元素（否则从父级继承零）

Answer 9

尝试使用float而不是“inline-block”，没问题。刚刚将display：inline-block更改为：

#left_side {float: left;}

和

#right_side {float: right; margin-right: 10%}

没有明显的问题。可能是错的。

Answer 10

不知道为什么，但我通过将border: 1px solid red;（垂直）和float: left;（水平）添加到相关的DIV样式语句并删除了空格来解决了这个问题。

Answer 11

您还可以将display: flex;添加到divs的父容器（在本例中为body）。 Fiddle。

Answer 12

父 div 设置为 font-size: 0px 和 childs 设置为想要的大小，如 17px :)

删除div之间的空白区域

12 个答案: