padding not working in span tag

<span> is by default an inline element and will not be sized nor accept vertical padding without resetting its display to inline-block ( or else but inline).

You might look for:

span{
    display:inline-block;
    padding: 40px;
}

beside, br could still be used

 br {
  line-height:3em;
  vertical-align:top;/* debug FF/IE */
}

http://codepen.io/anon/pen/GoVdYY

But, do you really need an extra tag, could you not apply a bottom margin or padding to another element ?

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>