CSS 如何删除内联块生成的额外边距空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1801589/
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
How do I remove extra margin space generated by inline blocks?
提问by Pavel Zaitsev
I am using this css to format two columns but I am still getting margin space between two. I can eliminate it with use of margin-left: -4px;or some such. Is there a more elegant way to do this or is there something wrong with the CSS code?
我正在使用这个 css 来格式化两列，但我仍然在两列之间获得了边距空间。我可以通过使用margin-left: -4px;或一些此类来消除它。有没有更优雅的方法来做到这一点，或者 CSS 代码有什么问题？
div.col1{
display: inline-block;
min-height: 900px;
height: 100%;
width 300px;
margin: 0px;
background-color: #272727;
overflow: hidden;
border: 1px dotted red;
}
div.col2{
display: inline-block;
min-height: 900px;
height: 100%;
width: 620px;
margin: 0px;
vertical-align: top;
border: 1px dotted red;
overflow: hidden;
}
回答by Caleb
Perhaps you have:
也许你有：
<div class="col1">
Stuff 1
</div>
<div class="col2">
Stuff 2
</div>
? If so then this is probably a whitespace problem (it turns out whitespace does matter in html). This should fix it:
? 如果是这样，那么这可能是一个空格问题（事实证明，空格在 html 中确实很重要）。这应该解决它：
<div class="col1">
Stuff 1
</div><div class="col2">
Stuff 2
</div>
回答by Shahen
A simple font-size:0to the parent element will work.
简单font-size:0的父元素将起作用。
回答by Hymantheripper
The elements with attribute inline-blockwill behave as if they are inline (hence the name), and therefore any whitespace encountered will be treated as a space. For example:
具有属性的元素inline-block将表现得好像它们是内联的（因此得名），因此遇到的任何空格都将被视为空格。例如：
<div></div><div></div>
will be rendered differently to
将被不同地呈现为
<div></div>
<div></div>
You can solve this problem using HTML as follows:
您可以使用 HTML 解决此问题，如下所示：
Either place all your elements on the same line, i.e.
要么将所有元素放在同一行上，即
<div>
// CONTENT
</div><div>
// CONTENT
</div><div>
// CONTENT
</div>
or use HTML comments to remove the spaces
或使用 HTML 注释删除空格
<div>
//CONTENT
</div><!--
--><div>
//CONTENT
</div>
You can solve this problem using CSS as follows:
您可以使用 CSS 解决此问题，如下所示：
Set the attribute font-size: 0on the parent, i.e.
font-size: 0在父级上设置属性，即
parent {
display: inline-block;
font-size: 0
}
parent * {
font-size: 12px
}
or set the attribute zoom: 1on the parent, i.e.
或zoom: 1在父级上设置属性，即
parent {
display: inline-block;
zoom: 1
}
回答by am80l
Alternatively, to fix this without changing the formatting of your source code, you can create an additional element.
或者，要在不更改源代码格式的情况下解决此问题，您可以创建一个附加元素。
If you were doing this in a list it would look like:
如果您在列表中执行此操作，它将如下所示：
<ul >
<li>
<a href="#">Solutions Overview</a>
</li>
</ul>
<style type="text/css">
ul {word-spacing:-1em;}
ul li a{word-spacing:0;}
</style>
回答by D.Alexander
Additionally, some helpful techniques can be found listed here:
此外，此处列出了一些有用的技术：
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
回答by lpradhap
Making the parent element font-size: 0will also resolve the issue.
制作父元素font-size: 0也将解决这个问题。
<div class="col-set">
<div class="col1">
Stuff 1
</div>
<div class="col2">
Stuff 2
</div>
</div>
.col-set { font-size: 0; }
.col-set > div { font-size: 12px; }
回答by Evan
apply float:left and that will remove the space so the text doesn't have to be on 1 line.
应用 float:left ，这将删除空格，因此文本不必在 1 行。
回答by Dmytrii Nagirniak
You should also specify:
您还应该指定：
padding: 0;
