Add spacing between two spans

Unlike <div> or <p> (which are block-level elements), <span> is an inline element.

According to Spec:

margin-top, margin-bottom properties have no effect on non-replaced inline elements.

In order to use top/bottom margin properties, you need to change the element's display type to block or inline-block (or whatever else margin is applicable to).

span {
    display: inline-block; /* change the display type           */
    margin: 10px 0;        /* apply the needed vertical margins */
}

Here is the JSBin Demo

Or, Simply set line-height property on the table-cell instead:

td { /* change the selector to select your specific td */
    line-height: 1.5; /* <-- set a line-height */
}

If I understand you correclty you want the spans to be on separate lines, but not have to use the <br> tag.

<span> is by default an inline element. Give it a property of display: block;

UPDATED with relevant code based on comment:

.labelForTextbox {
  ...
  display: block;
  margin-bottom: 10px; /** Change this value to whatever you wish **/
}

For the second span, you can use pading-left:somevalue

Example : <span>..</span><span style="padding-left:4px">..</span>

If you want to add spacing in html you can also use.

 

If you put three of these before your text, it will add 3 white spaces.

for example:

<label>&nbsp;<span>Test</span></label>