删除div之间的空白区域

Question

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

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

我无法找到空白的位置.

这是一个小提琴

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 的结束标记之后立即开始。这是有效的，因为元素之间的任何空间，因为它们现在是内联的，将成为布局本身的空间。您可以使用两个跨度元素来反映此行为。

演示。

Answer 5

仅将此添加到您的 CSS

h1 {
    padding:0;
    margin:0;
   }

div 之间的空间只是由于 h1 Margin 和 Padding

Answer 6

您还可以添加display: flex;到 div 的父容器（在本例中为body）。小提琴。