block extra margin

 

This question already has an answer here:

  • How do I remove the space between inline-block elements? 32 answers

    • The divs are treated as inline-elements. Just as a space or line-break between two spans would create a gap, it does between inline-blocks. You could either give them a negative margin or set word-spacing: -1; on the surrounding container.

    White space affects inline elements .

    This should not come as a surprise. We see it every day with span, strong and other inline elements. Set the font size to zero to remove the extra margin. 

    .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;
}

    The example would then look like this. 

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

    A jsfiddle version of this. http://jsfiddle.net/QtDGJ/1/

    A year later, stumbled across this question for a inline LI problem, but have found a great solution that may apply here.

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

    vertical-align:bottom on all my LI elements fixed my "extra margin" problem in all browsers.

    链接地址: http://www.djcxy.com/p/15774.html

    上一篇: 锚点之间的CSS不需要的间距

    下一篇: 阻止额外的利润