Jquery 附加一个链接'；我不能正确地运用这种风格

这是我的第一个问题，希望我搜索的足够多，可以发布！这是我的第一个完全编码的项目，我可能不知道一切

我试图用Jquery将一个样式化的链接附加到html中。 追加操作是错误的，但追加链接的样式似乎不正确：边距不是css中指定的边距。使用相同样式手动创建的链接正常，页边距良好

我打赌代码和结果比文字要好，所以这里是我的项目

Codepen上的实时演示

HTML

Jquery

$('button').on( "click", function() {
   var link = "<a class='link'>Added link</a>";
   $( ".container" ).append(link);
});

$（'button'）。在（“单击”，函数（）上）{
var link=“添加链接”；
$（“.container”）.append（链接）；
});

基本上，单击右上角的+按钮几次，您就会看到问题。初始链接的间距很小，但Jquery添加的链接的边距要小得多。 我试图改变页边空白的单位，或者改为固定宽度（不是理想的、反应灵敏的设计） 我在Firefox、Chrome和IE上都看到了这个问题

希望我说得够清楚，你会给我答案；）

---

提前谢谢

由于链接是display

内联块

，并且原始html代码中存在空白。所以在原始链接中有额外的空间。当jquery添加链接时，每个链接之间没有空格，这就是为什么您会看到它们更接近

修复

我建议你更新你原来的html，这样链接之间就没有空间了

<a class="link" id="fb">
    <h3>Link 1</h3>
</a><a class="link">
    <h3>Link 2
</h3></a>

链接1
链接2

或

链接1
链接2

现在调整你的利润，使他们适合，这将解决你的问题

jquery的修复

在jquery中添加空格非常简单

$('button').on( "click", function() {
   var link = "<a class='link'>Added link</a> ";
   $( ".container" ).append(link);
});

$（'button'）。在（“单击”，函数（）上）{
var link=“添加链接”；
$（“.container”）.append（链接）；
});

尝试使用有限单位作为边距，或者%应该是精确的，我已经尝试过了，但对于固定宽度或任何单位，问题仍然是一样的：/O很抱歉，因为它们是内联块。当jquery添加链接时，它可能在每个链接之间没有空格，这会导致出现问题。这是内联块的正常行为。如果项目之间有空格，则会显示该空格（原始链接），但如果没有空格（添加链接），则不会看到空格。我没有想到这么简单的答案！但这是可行的！是的，您可以很容易地注意到，在更新的answer@zfrisch这也行得通，而且我不必为我的利润寻找其他价值。谢谢

<a class="link" id="fb">
    <h3>Link 1</h3>
</a><a class="link">
    <h3>Link 2
</h3></a>

<a class="link" id="fb"><h3>Link 1
</h3></a><!--

--><a class="link"><h3>Link 2
</h3></a>

$('button').on( "click", function() {
   var link = "<a class='link'>Added link</a> ";
   $( ".container" ).append(link);
});