删除div之间的空白

Question

I'm getting some strange whitespace between two divs I have.

Each div has the css property display: inline-block and each have a set height and width.

I cannot find where the whitespace is.

Here is a Fiddle

Answer 1

You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.

You have:

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

Change for:

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

However, this is a bad way to do what you want to do.

You should float the elements if thats what you want to do.

Answer 2

Use:

float:left;
clear:none;  

In both div

Answer 3

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

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

Answer 4

Only add this to your CSS

h1 {
    padding:0;
    margin:0;
   }

Space between div is only due to h1 Margin and Padding

Answer 5

This does the trick:

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

Notice how the right-side div starts immediately after the closing tag of the left-side div. This works because any space between the elements, since they are now inline, would become a space in the layout itself. You can mirror this behavior with two span elements.

Demo .

Answer 6

You can also add display: flex; to the divs' parent container (in this case, body ). Fiddle .

Answer 7

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

Answer 8

Floated both of the elements left, also made the 30% width into 40% to fill all the space, but this isn't necessary. Please be aware, "inline-block" isn't supported by IE7 but can be fixed with a workaround.

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

Answer 9

将这些语句移到同一行：

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

Answer 10

Tried using float instead of "inline-block", no problems. Just changed the display:inline-block to:

#left_side {float: left;}

and

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

No apparent problems. Could be wrong.

Answer 11

Don't know why but I resolved this problem by adding border: 1px solid red; (vertical) and float: left; (horizontal) to related DIV style statement and white-spaces removed.

Answer 12

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