javascript - 使用 jQuery 将多个元素彼此相邻放置后，第一个元素的(额外)填充/边距是多少

Question

第一个元素的右侧似乎有额外的间距，我不知道它是从哪里来的。有人可以帮助我吗？

这是我使用的代码: http://jsfiddle.net/srabeat/tenx4y1c/1/

for (i = 0; i < 30; i++) {
    $(".box").append('<div class="x"></div>');
}

.box {
    background-color: #ddd;
    width: 200px;
    height: 200px;
    border: 1px solid #fff;
}
.x {
    color: #444;
    margin: 10px;
    height:10px;
    width: 10px;
    background-color: #444;
    display: inline-block;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    <div class="x"></div>
</div>

Answer 1

我 fork 了你的 fiddle 并删除了容器结束标签前的空格和新行。因为您正在设置 display: inline-block，它将被视为文本，标签后面的空格也会被渲染。

你可以使用display: block;向左飘浮;相反。

http://jsfiddle.net/1ancpbfm/1/