Question

如何在以下范围内提供 margin-top ，以便它们不会彼此保持太近？

＆＃13;

.video-tags{
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
  
}

＆＃13;

<span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span>
<span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span>

＆＃13;

Answer 1

.video-tags {
    float: left
}

......或

.video-tags {
    display: inline-block
}

Answer 2

您可以使用inline-block

.video-tags{
  margin-top: 5px;
  display: inline-block;
}

Answer 3

只是为了解释，因为没有人真的这样做......一个span是一个内联元素。内联元素意味着与它们周围的内容一起流动，因此它们对诸如边距之类的内容做出不同的反应。为了能够为它们设置边距，您需要将它们转换为块元素。但是，您不希望通过将它们设置为阻塞来搞乱它们的位置，因此您将它们设置为内联块，以便它们保持内联，然后获得块级元素的形式。

Answer 4

你想要的是增加线框之间的分隔，即line height。

如inline formatting contexts部分所述，用户代理将内联级别的框转换为line boxes的垂直堆栈。

您可以使用line-height属性设置最小值。

在内容由其组成的block container element上 inline-level个元素，line-height指定 minimal 元素内线框的高度。

body {
  line-height: 50px;
}
.video-tags {
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

<span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span>
<span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span>

或者，您可以增加线框内的内联级元素的高度。但是，并不总是使用边距框：

计算行框中每个内联级别框的高度。对于替换元素，内联块元素和内联表元素，这是他们边缘盒子的高度;对于内联盒，这是他们的line-height。

也就是说，对于像你的跨度这样的内联框，在计算线之间的间隔时会忽略边距和填充。

但是，您现在可以使用line-height，而不是容器：

在未替换的inline元素上，line-height指定用于计算行框高度的高度。

.video-tags {
  line-height: 50px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

<span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span>
<span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span>

或者，将您的跨度显示为内联块。然后将考虑整个边距框的高度。

.video-tags {
  display: inline-block;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

<span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span>
<span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span><span class="video-tags"><a href='/tag/{{ vTag }}/' title="{{ vTag }} My Video" class='video-tags'>{{ vTag }} &nbsp;</a></span>

Answer 5

试试这个：

.video-tags{
  margin: 5px;
  display: inline-block;
}

CSS Margin-Top on element

5 个答案: