Menu
Try: margin: 10px or similar in the span styles. That gives you a space. If you need more than one whitespace, you can use entity.
span won't have padding because it is an inline element by default, so set inline-block or block.
The <span> tag is a inline element, it fits into the flow of the content and can be distributed over multiple lines. We can not specify a height or width or surround it with a margin.
Alter your css for the span to show white spaces, just like in the <pre> tag.
Take a look at the different white-space options
span {
background-color: black;
white-space:pre;
}
From the mentioned resource here is a nice table what the different options for white-space will do:
New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
pre Preserve Preserve No wrap
nowrap Collapse Collapse No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap
If you add a to your span, the string will not break anymore on your space but instead 'glue' the two parts together, without wrapping the string on the space.
Another option if you do not want to rely on CSS for any reason is using the non-breaking space: ,   or
(see here for more information about it)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With