Can't get rid of spaces between inline

This question already has an answer here:

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

---

put the close tag of one and the open tag of the next element on the same line:

<div class="top-menu-item">
Item 2
</div><div class="top-menu-item">
Item 3</div>

Inline elements take the whitespace that is between them and this renders as 1 space. If you put the next element directly after the previous there will be no whitespace in between and the space will be gone.

---

Quick redux of the problem:

inline and inline-block tell the browser to display an element as if it was a word. Words have spaces between them. Your options for getting rid of these spaces are:

Remove the spaces from the markup

Use floats instead, which don't care about spaces in markup

Or find the width of a space and use margins or positioning to remove the spaces visually.

Solutions:

All css options, forevermore: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

If you can't float, an em based negative margin gets my vote.

---

这里有另一个堆栈溢出线程，但这里有一个备用解决方案：http://jsfiddle.net/Gv6w3/3/

.top-menu-item {
  display:block;
  float:left;
  width:100px;
  margin:0px;

  background:#FFFF00;
  border:solid thin #00FF00;
}

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

上一篇: 删除div之间的边距

下一篇: 无法摆脱内联之间的空间