Html 删除div之间的空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9555240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Delete white space between divs
提问by Taras Lukavyi
I'm getting some strange whitespace between two divs I have.
我在两个 div 之间出现了一些奇怪的空白。
Each div has the css property display: inline-blockand each have a set height and width.
每个 div 都有 css 属性display: inline-block，每个 div都有一个设置的高度和宽度。
I cannot find where the whitespace is.
我找不到空格在哪里。
回答by Thomas Clayson
You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.
你在那里得到空白是因为你在 div 之间有空白。内联元素之间的空白被解释为空格。
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.
如果那是你想要做的，你应该浮动元素。
回答by check123
Use:
用：
float:left;
clear:none;
In both div
同时 div
回答by fuzzysearch
If you want to retain your coding layout, avoid floats and keep each div on it's own line entirely...
如果您想保留您的编码布局，请避免浮动并将每个 div 完全保留在自己的行上...
<div id="leftSide">Some content here</div><!--
--><div id="rightSide">Some more content here</div>
<div id="leftSide">Some content here</div><!--
--><div id="rightSide">Some more content here</div>
回答by Purag
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.
请注意右侧 div 如何在左侧 div 的结束标记之后立即开始。这是有效的，因为元素之间的任何空间，因为它们现在是内联的，将成为布局本身的空间。您可以使用两个跨度元素来反映此行为。
Demo.
演示。
回答by user3170223
Only add this to your CSS
仅将此添加到您的 CSS
h1 {
padding:0;
margin:0;
}
Space between div is only due to h1 Margin and Padding
div 之间的空间只是由于 h1 Margin 和 Padding
回答by dodov
回答by AlexKempton
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.
将两个元素都向左浮动，同时将 30% 的宽度变成 40% 以填充所有空间，但这不是必需的。请注意，IE7 不支持“inline-block”，但可以通过一种变通方法进行修复。
回答by Derek Tomes
Move these statements onto the same line:
将这些语句移到同一行：
</div><div id="right_side">
回答by user2613041
Tried using float instead of "inline-block", no problems. Just changed the display:inline-block to:
尝试使用 float 而不是“inline-block”，没问题。刚刚将 display:inline-block 更改为：
#left_side {float: left;}
and
和
#right_side {float: right; margin-right: 10%}
No apparent problems. Could be wrong.
没有明显的问题。可能是错的。
回答by gdarcan
best way is settings parent element's font-size to 0 then normal font-size to child elements inside that parent (otherwise inherits zero from parent)
最好的方法是将父元素的字体大小设置为 0，然后将正常字体大小设置为该父元素内的子元素（否则从父元素继承零）
