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> <span>Test</span></label>