Css list style margins

CSS Lists

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example

ol.c list-style-type: upper-roman;
>

ol.d list-style-type: lower-alpha;
>

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

Example

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

«list-style-position: outside;» means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:

«list-style-position: inside;» means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

Example

ul.a <
list-style-position: outside;
>

ul.b list-style-position: inside;
>

Remove Default Settings

Example

List — Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example

When using the shorthand property, the order of the property values are:

• list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
• list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)

If one of the property values above is missing, the default value for the missing property will be inserted, if any.

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

or
tag, affects the entire list, while properties added to the
tag will affect the individual list items:

Example

ol <
background: #ff9999;
padding: 20px;
>

ul background: #3399ff;
padding: 20px;
>

ol li background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
>

ul li background: #cce5ff;
color: darkblue;
margin: 5px;
>

More Examples

Customized list with a red left border
This example demonstrates how to create a list with a red left border.

Full-width bordered list
This example demonstrates how to create a bordered list without bullets.

All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.

All CSS List Properties

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies the position of the list-item markers (bullet points)
list-style-type	Specifies the type of list-item marker

Источник

CSS-свойство List

Двумя наиболее распространенными типами HTML-списков являются упорядоченный и неупорядоченный. Для их стилизации списков мы будем использовать свойство list-style CSS .

Ниже приведен пример неупорядоченного списка. В нем видно, что по умолчанию у списков используется выравнивание по левому краю:

list-style-type

Чтобы задать стиль маркера для пунктов списка, можно использовать свойство list-style-type .

Стандартное значение этого свойства – disc , но можно использовать и другие значения: circle , square , none . Кроме этого можно использовать такие значения, как upper-alpha , lower-alpha , upper-roman , lower-roman , decimal и т. д.

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

Если вам вообще не нужны маркеры, то CSS list style type необходимо присвоить значение none :

Поля и отступы

Чтобы добавить в список отступы, можно использовать свойство margin .

В приведенном ниже примере использования CSS ul li list style мы прибавляем поля по 30px над и под списком:

В следующем примере мы полностью исключаем поля:

В примере CSS ul list style мы убираем отступы:

Здесь мы задаем списку фиксированную ширину:

List-style-position

Это свойство отвечает за то, как текст внутри list style CSS будет переходить на следующую строку. Стандартное значение outside означает, что при переносе строки текст также получит выравнивание по левому краю. Если выставлено значение inside , то строка будет перенесена под маркер списка.

В примере, приведенном ниже, представлен список, в котором свойство list-style-position выставлено на outside ( значение по умолчанию ):

В следующем примере показано, что будет, если свойство list-style-position будет иметь значение inside . Таким образом, текст на новой строке будет начинаться прямо под маркером:

List-style-image

Свойство list-style-image позволяет использовать собственную пиктограмму в качестве маркера.

В примере CSS ul list style мы используем изображение звезды вместо маркера списка:

Сокращение list-style

Можно использовать сокращенное свойство list-style для назначения тех же стилей. В приведенном ниже примере мы задаем тип, расположение и изображение маркера списка:

Список inline

По умолчанию, все пункты списка перечисляются с новой строки, то есть, вертикально. Если нужно выводить список горизонтально или строчно ( inline ), нужно присвоить элементам списка display inline .

В приведенном ниже примере представлен строчный список:

Стилизация упорядоченного списка

Теперь пришло время задать стиль для CSS ol list style . По умолчанию, list-style-type для упорядоченного списка установлен при помощи десятичного числа:

Чтобы изменить тип, можно поменять значение на upper-alpha , lower-alpha , upper-roman , lower-roman .

Ниже приведен пример, где list-style-type имеет значение upper-alpha :

В следующем примере list-style-type имеет значение lower-roman :

Источник