CODEWITHSUNDEEP
htmlcss
Pedro Lobito
Pedro Lobito

Reputation: 98861

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>

Upvotes: 0

Views: 54

Answers (5)

Oriol
Oriol

Reputation: 287950

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>

Alternatively, you can increase the height of the inline-level elements inside the line box. However, the margin box is not always used:

The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their line-height.

That is, for inline boxes like your spans, margins and paddings are ignored when calculating the separation between lines.

However, you could use line-height, now on the spans instead of on the container:

On a non-replaced inline element, line-height specifies the height that is used in the calculation of the line box 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>

Alternatively, display your spans as inline-blocks. Then the height of their whole margin box will be taken into account.

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

Upvotes: 1

DawnPatrol
DawnPatrol

Reputation: 156

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.

Upvotes: 1

L&#233;o
L&#233;o

Reputation: 289

Try this:

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

Upvotes: 0

filype
filype

Reputation: 8380

You can use inline-block

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

Upvotes: 1

Midas
Midas

Reputation: 7131

.video-tags {
    float: left
}

... or

.video-tags {
    display: inline-block
}

Upvotes: 1

Related Questions