当前位置: 动力学知识库 > 问答 > 编程问答 >

html - CSS Margin-Top on element

问题描述:

How do I give margin-top on the following spans so they don't stay too close to each other?

.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>

网友答案:

You can use inline-block

.video-tags{
  margin-top: 5px;
  display: inline-block;
}
网友答案:
.video-tags {
    float: left
}

... or

.video-tags {
    display: inline-block
}
网友答案:

Just to explain since no one really did... A span is an inline element. Inline elements are meant to flow with the content that surrounds them and so they react differently to things such as margin. In order to be able to put a margin on them, you need to turn them into block elements. However, you don't want to mess up their positioning by setting them to block so you set them to inline-block so they stay inline, yet gain the form of a block level element.

网友答案:

What you want is increase the separation between line boxes, that is, the line height.

As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes.

You can set a minimum value using the line-height property.

On a block container element whose content is composed of inline-level elements, line-height specifies the minimal height of line boxes within the element.

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>
网友答案:

Try this:

.video-tags{
  margin: 5px;
  display: inline-block;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: