Li marker css padding

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>

Источник

Как увеличить расстояние от маркера до текста?

Изменить в маркированном списке расстояние между маркером и текстом после него.

Решение

Для изменения расстояния между маркером списка и текстом используйте свойство padding-left для селектора LI , как показано в примере 1.

Пример 1. Отступ от маркера до текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Расстояние в 20 пикселов между маркерами и текстом списка

Отрицательное значение для padding-left использовать нельзя, поэтому минимальное задаваемое расстояние равно нулю. Но даже в этом случае небольшой исходный промежуток между маркером и текстом останется.

Указанное решение не работает, если для списка задано свойство list-style-position со значением inside .

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

CSS-стили для маркированных списков

Вид маркера можно задать через CSS свойство list-style-type :

Возможны следующие значения:

Цвет и размер стандартного маркера

Цвет стандартного маркера задается через псевдосвойство ::marker :

Результат:

Поддержка ::marker в браузерах

Маркеры PNG, JPG

Вставка изображения marker.png через свойство list-style-image :

Результат:

Вставка изображения через свойство background :

Результат:

Маркеры SVG

Изображение marker.svg можно вставить через свойство list-style-image . Размер изменяется с помощью font-size в псевдосвойстве ::marker .

.markers < margin: 0 0 20px 14px; padding: 0; >.markers li < list-style-image: url(/marker.svg); margin: 7px 0; >.markers li::marker

Результат:

Если вставить изображение через свойство background , размер SVG можно изменить с помощью свойства background-size .

Результат:

Маркеры символами эмодзи

Вместо маркера можно вставить любой символ, используя свойство list-style-type :

Результат:

Чтобы задать свой символ каждому элементу списка нужно использовать правило@counter-style:

@charset "UTF-8"; @counter-style marker-emoji < system: cyclic; symbols: "🍋" "🍎" "🍒"; suffix: " "; >.markers < margin: 0 0 20px 24px; padding: 0; list-style-type: marker-emoji; >.markers li

Маркеры иконочными шрифтами Material

@charset "UTF-8"; @counter-style marker-font < system: cyclic; symbols: "arrow_forward"; suffix: " "; >.markers < margin: 0 0 20px 24px; padding: 0; list-style-type: marker-font; >.markers li::marker < font-family: 'Material Icons'; color: red; line-height: 1; font-size: 14px; >.markers li

Результат:

@charset "UTF-8"; @counter-style marker-emoji < system: cyclic; symbols: "arrow_forward" "add" "star_rate"; suffix: " "; >.markers < margin: 0 0 20px 24px; padding: 0; list-style-type: marker-emoji; >.markers li::marker < font-family: 'Material Icons'; color: red; line-height: 1; font-size: 14px; >.markers li < margin: 7px 0; font-size: 14px; >.markers li:before

Результат:

Комментарии 2

Роман

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Несколько примеров как задать стили у нумерации списков с применением счетчика counter и псевдоэлемтов :before и.

Элементы dl, dt, dd предназначенных для создания списка определений. dl – общий контейнер, dt – термин, dd –.

Читайте также: Css content box style

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf — это конвертер HTML в PDF который.

Источник

Li marker css padding