为什么这4个div不是彼此相邻的？ （宽25％）

Question

你可以向我解释为什么这4个div不会彼此相邻吗？有4个div，我将它们的宽度设置为25％，因此它们填满了整个页面，但是其中1个div被推入其中。我必须将宽度设置为24％，让它们彼此相邻。怎么会？在我的书中4x25％= 100％。

http://jsfiddle.net/cm2K6/

.four {
    display: inline-block;
    vertical-align: top;
    width: 25%;
}

Answer 1

HTML代码中的“Enter”等于空格，如果删除这些空格</div><div>，则会丢失inline-blocks（或inline元素之间的空格）

示例：http://jsfiddle.net/cm2K6/3/

除非您希望代码看起来不错，否则无需使用float:left;，box-sizing，word-spacing或类似的任何内容。

Answer 2

因为display: inline-block元素之间有自然的间距。您可以改为使用float: left：

JSFIDDLE

Answer 3

内联块和内联块元素让一个重要的空白字符影响它们的布局 删除</div>和<div>标记之间的任何空格

http://jsfiddle.net/cm2K6/7/

Answer 4

诀窍是不要在div之间放置HTML中的空格。我知道这很奇怪，但它确实有效。如果您仍想保留内联块，则可以使用margin-right: -1%，否则请使用浮动元素。