JQuery prependTo（）在div之间创建额外空间 问题

我正试图将一个

clone（）

div预先添加到一个现有的div集合中，并遇到一个奇怪的问题。Div似乎在Div之间创造了更多的空间，就像这样。可能有一个黑客通过重新格式化html，但我真的不想这样做

代码如下： HTML JQuery

---

---

jsiddle-您需要像这样删除第一个

.template

之前的空格，因为在添加第一个额外的

内联块

元素之后，html中的空格仍然存在，浏览器会将

内联块

之间的空格呈现为4px

<div class="content"><div class="template">
        <p>Hi <b>Bob</b></p>
    </div><div class="template">
        <p>Hi <b>Mark</b></p>
    </div>
</div>

嗨，鲍勃

你好，马克

---

这是

内联块

元素的常见问题。如果元素之间存在空间，则元素之间将显示空间

常见的修复方法是将容器的

字体大小设置为
0
。这样，空间将不占用任何空间：

.template {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:blue;
    margin:1px;

    font-size: 8pt;
}

.content {
    background-color:red; 
    font-size: 0;
}


或者，在此特定情况下，您可以简单地删除第一个div标记之前的空格：

<div class="content"><div class="template">
        <p>Hi <b>Bob</b></p>
    </div>


嗨，鲍勃


我认为这是因为您使用的是
display:inline block
。有时可能会有一个空字符显示为额外的空白

我在这个网站上尝试了一些技巧

要删除内联块元素之间的空白，请尝试将
.content
元素的字体大小设置为
字体大小：0px

.content {
    background-color:red; 
    font-size: 0px;
}

.template {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:blue;
    margin:1px;
    font-size: 15px;
}

这里我更新了你的小提琴

.template {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:blue;
    margin:1px;

    font-size: 8pt;
}

.content {
    background-color:red; 
    font-size: 0;
}

<div class="content"><div class="template">
        <p>Hi <b>Bob</b></p>
    </div>

.content {
    background-color:red; 
    font-size: 0px;
}

.template {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:blue;
    margin:1px;
    font-size: 15px;
}