【问题标题】：JQuery prependTo() create extra space between div(s)JQuery prependTo() 在 div(s) 之间创建额外的空间
【发布时间】：2013-05-06 07:34:13
【问题描述】：

问题

我正在尝试将clone() div 添加到现有的一组 div 并遇到一个奇怪的问题。 div 似乎像这样在 div 之间创建了额外的空间。通过重新格式化 html 可能会有黑客攻击，但我真的不想这样做。

这是代码：

HTML

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

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

<button>Add Another Box</div>

CSS

.resources {
    display:none;
}

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

.content {background-color:red}

jQuery

$('button').on('click',function(){
    $('.resources .template').clone()
        .find('b').html("joe").end()
        .prependTo(".content");
});

JSFiddle - http://jsfiddle.net/7Kmex/1/

【问题讨论】：

标签： jquery html css clone

【解决方案1】：

这是inline-block 元素的常见问题。如果元素之间有空格，则元素之间会显示一个空格。

对此的常见解决方法是将容器的font-size 设置为0。这样空间就不会占空间了：

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

    font-size: 8pt;
}

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

http://jsfiddle.net/7Kmex/5/

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

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

http://jsfiddle.net/7Kmex/6/

【讨论】：

【解决方案2】：

我认为这是因为您使用的是display:inline-block。有时可能会在某个地方出现一个空字符，显示为您的额外空格。

我尝试了这个网站http://css-tricks.com/fighting-the-space-between-inline-block-elements/的一些技术

要删除行内块元素之间的空格，请尝试将 .content 元素的字体大小设置为 font-size: 0px

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

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

在这里我更新了你的小提琴http://jsfiddle.net/7Kmex/8/

【讨论】：

【解决方案3】：

您需要像这样删除第一个 .template 之前的空格，因为在添加第一个额外的 inline-block 元素后 html 中的空格仍然存在，inline-blocks 之间的空格会被浏览器渲染为 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>

updated jsfiddle

【讨论】：