显示:内联块额外边距

Question

我正在使用一些div设置为display: inline-block并且有一组height和的s width.在HTML中,如果每个后面都有一个换行符,则会div在div的右下角添加一个自动5px边距.

例:

<div>Some Text</div>
<div>Some Text</div>

有没有我忽略的财产可以让我重置自动保证金？

更新

从我发现的,没有办法删除边距...除非你要么在同一行上有所有内容,或添加注释以注释掉换行符.例:

<div>Some Text</div><!--
--><div>Some Text</div>

不是最好的解决方案,但如果您有多行,仍然更容易阅读.

Answer 1

空白区域会影响内联元素.

这不应该是一个惊喜.我们每天都会看到它具有跨度,强大和其他内联元素.将字体大小设置为零以删除额外的边距.

.container {
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}

.container > div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  letter-spacing: 1em;
  word-spacing: 2em;
}

这个例子看起来像这样.

<div class="container">
  <div>First</div>
  <div>Second</div>
</div>

一个jsfiddle版本.http://jsfiddle.net/QtDGJ/1/

Answer 2

div被视为内联元素.正如两个跨距之间的空间或换行符会产生间隙一样,它也可以在内联块之间进行.你可以给它们一个负边距或设置word-spacing: -1;在周围的容器上.

Answer 3

一年之后,偶然发现了这个内联LI问题的问题,但是找到了一个很好的解决方案,可能适用于此处.

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

vertical-align:bottom在我的所有LI元素上修复了所有浏览器中的"额外边距"问题.

Answer 4

font-size: 0 到父容器

(来源:https://twitter.com/garand/status/183253526313566208)

Answer 5

删除这些空格的更清洁方法是使用float: left;:

DEMO

HTML:

<div>Some Text</div>
<div>Some Text</div>

CSS:

div {
    background-color: red;
    float: left;
}

我支持所有新浏览器.从来没有得到它为什么回来当IE统治很多开发人员没有起诉他们的网站在firefox/chrome上运行良好,但今天,当IE降至14.3%.无论如何,在IE-9中没有很多问题,甚至认为它不受支持,例如上面的演示工作正常.

Answer 6

即使您的内联块元素之间没有任何WHITESPACE,也可以获得垂直空间.

对我来说,这是由于line-height.简单的解决方法是:

div.container {
    line-height: 0;
}
div.container > * {
    line-height: normal;
}