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

Question

问题

我正在尝试将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/

Answer 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/

Answer 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/

Answer 3

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