Html span style space

Html span style space

Solutions with HTML and CSS

In this snippet, you can find some methods of controlling the space between bullets and elements.

The best way is using the HTML element. Put the content into a , and set the CSS position property to “relative” and also, add the left property to control the space.

Example of changing the space between bullets and list items by using elements:

html> html> head> title>Title of the document title> style> li < color: #666666; > span < position: relative; left: -12px; > style> head> body> ul> li> span>Text 1 span> li> li> span>Text 2 span> li> li> span>Text 3 span> li> ul> body> html>

Result

In the next example, we use the padding-left property for the same purpose.

Example of changing the space between bullets and list items by using the padding-left property:

html> html> head> title>Title of the document title> style> ul < padding-left: 50px > ul li < padding-left: 50px > style> head> body> ul> li>Text 1 li> li>Text 2 li> li>Text 3 li> ul> body> html>

If you use this method, take into account that the bullet and the text must be of the same color. Also, you cannot move the bullet closer to the text than the browser default, and you won’t have control over the bullet’s vertical positioning.

In our last example, we use the background property to add arrows instead of bullet points.

Example of changing the space between bullets and list items:

html> html> head> title>Title of the document title> style> ul < padding-left: 2em; > ul li < list-style-type: none; padding-left: 2em; color: #f00; background: url('/build/images/arrow-right.4aad274a.png') no-repeat center left; > ul li span < display: block; margin-left: -0.5em; color: #000; > style> head> body> ul> li>some text li> li> span>Text 1 span> li> li> span>Text 2 span> li> li> span>Text 3 span> li> ul> body> html>

Источник