How to apply margin-top to <small> tag?

Question

I want to set margin-top to <small> tag. In other word I how can I increase the space of <small> tag with the upper element?

Note: I can increase the space using line-height, But I just want to set space from the top, not both top and bottom.

small{
    margin-top: 100px;
    color: #999;
}

<div>It is a test<div>
<small>this need to some margin-top</small>

How can I do that?

Answer 1

Box Model - 8.3 Margin properties

Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.

A small tag is inline by default. As stated by the spec above, vertical margins do not apply to strictly inline level elements.

You could change the display to inline-block, and it would work as expected:

small {
  margin-top: 100px;
  color: #999;
  display: inline-block;
}

<div>It is a test<div>
<small>this need to some margin-top</small>