Margin-Top Not Working For Span Element

Margin-Top not working for span element?

Unlike div, p ¹ which are Block Level elements which can take up margin on all sides,span² cannot as it's an Inline element which takes up margins horizontally only.

From the specification:

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.

Demo 1 (Vertical margin not applied as span is an inline element)

Solution? Make your span element, display: inline-block; or display: block;.

Demo 2

Would suggest you to use display: inline-block; as it will be inline as well as block. Making it block only will result in your element to render on another line, as block level elements take 100% of horizontal space on the page, unless they are made inline-block or they are floated to left or right.

^{1. Block Level Elements - MDN Source}

^{2. Inline Elements - MDN Resource}

How to set different margin-top for span elements?

You need to put vertical-align: top. By default inline-block elements will sink to the level of their siblings.

Margin-top/Margin-bottom not working

That's because span is an inline element, and margin-top/bottom doesn't work in inline elements, so make it a inline-level block container element.

inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

body {
  font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
  background-color: #f0f0f0;
}
span.bigger {
  display: inline-block;
  font-size: 1.5em;
  margin:10px;
  background-color: white;
  padding: 5px;
}

<div id="content">
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
</div>
No margin

Margin top of first span not working

The issue you are facing, is called collapsed margin, hence either you can use position: relative; with top set to 10px or use overflow: auto; on the parent element.

Demo (Using overflow: auto;)

Demo 2 (Using position: relative; + top: 10px; and top: 20px;)

position: relative; method will require you to set the top separately as it will move your element, though it physically reserves the space, hence you will have to double up for the second one..

padding not working in span tag

2 things to fix:

you were applying the CSS to span of an ID selector, but you were using a span with an ID selector in your HTML.
span won't have padding because it is an inline element by default, so set inline-block or block

Snippet

#beforeImage {  padding: 40px;  display: inline-block; /* or block */ /* demo */  background: red }

<span id="beforeImage">Foo bar</span>

How to use margin top between input and span

Use your span as a block so the margin will be applied

    span{
      display: block;
      margin-top: 3px;
    }

Margin-top value not being applied

Replace <container> by a <div> and your margin can apply. The reason is as <container> is not a valid HTML markup, the browser do not know how to display it and ignores it.

<div class="universal-header">
    <div class="header-top">
        <div class="social-media">
            <i class="fab fa-youtube-square" style="font-size: 2.5rem"></i>
            <i class="fab fa-instagram" style="font-size: 2.5rem"></i>
            <i class="fab fa-facebook" style="font-size: 2.5rem"></i>
            <i class="fab fa-pinterest" style="font-size: 2.5rem"></i>
            <i class="fab fa-twitter-square" style="font-size: 2.5rem"></i>
        </div>
        <nav>
            <a href="#">Home</a>
            <a href="#">Stories</a>
            <a href="#">Travel Resources</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
            <a href="#">Shop</a>
        </nav>
    </div>

    <h1>Black Diasporer</h1>
</div>

Custom HTML elements in browser are handled as web components, and I guess this it not what you were trying to do.

Margin-Top Not Working For Span Element