Как сделать расстояние между элементами списка css

Обновлено: 04.07.2024

Сегодня мы поговорим с вами немного о принципах верстки, а именно – о способах организации отступа на вашем сайте у определенных элементов.

В качестве рассматриваемого элемента, у которого необходимо сделать отступ, может быть текст, изображение, таблица или любой другой HTML-элемент. Главное – это следовать некоторым важным правилам, о которых я сейчас расскажу.

Если вы еще только создаете свой сайт, то я рекомендую вам в верх вашего главного файла стилей вставить следующие свойства:

Зачем это нужно, спросите вы? Отвечаю на ваш вопрос наглядным примером.

Допустим, у вас есть такой элемент верстки:

Так будет выглядеть вариант без использования описанных выше свойств (верхний элемент) и с их использованием (нижний элемент):

Что здесь видно? Что ширина элемента в первом варианте (без использования свойств) стала больше указанной за счет добавленных отступов, что является не совсем удобным и правильным в плане верстки.

А теперь, собственно, поговорим о вариантах организации отступов у элементов на вашем сайте с наглядными примерами.

Чтобы вы понимали всю логику вещей, возьмем для примера следующий фрагмент верстки:

со своими стилями:

Визуальный вариант получается таким:

Визуально это получается так:

Число 10 в свойстве говорит о том, что внутри указанных элементов с каждой из их четырех сторон необходимо добавить отступ, равный 10px. Пиксели (px) могут быть заменены на проценты или другую поддерживаемую в CSS величину.

Всего существует два варианта указания сторон, с которых необходимо сделать отступы.

Первый – это с явным указанием сторон:

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

Здесь идет простое перечисление значений, каждое из которых соответствует своей стороне. Стороны задаются так: первое значение – верх, второе – право, третье – низ и четвертое – лево, то есть все по часовой стрелке.

Этот тип отступов хорошо подходит для разделения текста, содержания ячеек таблиц и прочей текстовой информации. Для разделения же самих элементов, подобных тем, что в примере выше, существует другое свойство.

Вариантов добавления здесь также два.

Первый – с явным указанием стороны:

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

Используем margin со следующим значением:

Визуально это будет выглядеть так:

Как видно из примера, в таком случае добавляется внешний отступ, разделяющий между собой указанные элементы.

Важная особенность: если вы внимательно смотрели на результат, то могли заметить, что соседние отступы у элементов не суммируются. То есть если первый элемент имеет внешний нижний отступ, равный 10px, а второй – внешний верхний отступ с этим же значением, то общее расстояние между ними будет равно также 10px. Если 10 и 15 соответственно, то общее – 15 и так далее.

Этот вариант отступов часто используется в тексте, а именно в оформлении параграфов, а также в элементах, которые имеют видимые границы.

Но оба свойства не ограничиваются лишь этими элементами. Варианты их использования вы выбираете сами, я лишь постарался преподнести вам основу о них.

На первый взгляд в свойстве margin CSS нет ничего сложного и непонятного. Оно помогает освободить пространство вокруг любого элемента, отодвинув в сторону все остальное. Однако это свойство может оказаться более непредсказуемым, чем вы привыкли думать.

Первое, что узнают о CSS те, кто решил приступить к его изучению, — это, конечно же, блочная модель форматирования документа (The CSS Box Model). Одним из элементов этой модели как раз и является отступ (margin), прозрачная область, окружающая блок, другими словами — его внешние поля, которые отодвигают прочь от содержимого все остальные элементы. Свойства margin-top, margin-right, margin-bottom и margin-left были описаны еще в CSS1, наряду с сокращением margin, которое позволяет определять значения всех четырех свойств сразу.

Отступы кажутся довольно простой вещью, однако в этой статье будет рассмотрены те особенности их применения, которые все еще непонятны многим пользователям, а именно — как отступы взаимодействуют друг с другом и что такое их схлопывание.

Содержание статьи

Блочная модель CSS

Блочная модель описывает то, как различные элементы блока (бокса, коробки) — содержимое, внутренние поля, границы и отступы — отображаются на странице и взаимодействуют друг с другом. В CSS1 блочная модель была детализирована с помощью диаграммы ASCII, которую вы можете видеть на изображении ниже:

Описание блочной модели CSS в CSS1

Внешние поля для каждой из сторон блока и сокращение magrin были описаны в CSS1.

Спецификация CSS2.1 располагает иллюстрацией, которая демонстрирует блочную модель и дает определение терминов, которые используются для описания различных блоков. Спецификация описывает content box, padding box, border box и margin box. Как вы можете видеть, любой блочный элемент состоит из этого набора боксов: в центре — контент, его обрамляют внутренние поля (padding), затем следуют границы и потом — внешние поля, отступы.

Описание блочной модели CSS в CSS2

Схлопывание отступов

Спецификация CSS1 в своем определении отступов содержит фразу, что вертикальные отступы могут схлопываться (margins collapse), вкладываться друг в друга. Именно этот момент многих сбивает с толку. Схлопывание отступов небеспричинно, ведь раньше CSS использовался в качестве языка форматирования документов.

Данный процесс описывает ситуацию, когда у блочных элементов расположенных рядом друг с другом по вертикали, отступы не суммируются, а объединяются между собой, то есть если за нижним отступом заголовка следует параграф с верхним отступом, то между ними большого разрыва создано не будет.

При схлопывании отступов они объединяются, меньший отступ, по сути, заканчивается в большем.

между соседствующими блоками;
между абсолютно пустыми блоками;
между родительским и первым или последним дочерним элементом.

Рассмотрим каждый из этих сценариев в отдельности, а затем перейдем к тому, что препятствует схлопыванию отступов.

Соседствующие блоки

Проще всего объяснить, что такое margin collapse, на примере того, как рушатся границы между соседствующими блоками. За исключением ситуаций, упомянутых ниже, если у вас есть два элемента, расположенных друг под другом, нижний отступ первого элемента объединится с верхним отступом следующего элемента.

В примере ниже вы увидите три div-элемента. У первого верхний и нижний отступ равен 50 пикселям, у второго — 20 пикселей, у третьего — 3em. Расстояние между первыми двумя элементами составляет 50 пикселей, поскольку меньший отступ вкладывается в больший. Расстояние между вторым и третьим элементом равен 3ем, так как 3em больше, чем 20 пикселей нижнего отступа второго элемента.

Совершенно пустые блоки

Родительский и первый или последний дочерний элемент

Это сценарий схлопывания отступов, который сбивает с толку многих, поскольку не является интуитивно понятным.

Это связано с тем, что отступ дочернего элемента схлопывается с любым отступом на родительском элементе. Вы увидите это, если посмотрите на первый дочерний элемент с помощью DevTools. Выделенная желтая область — это внешние поля, отступы.

DevTools может помочь вам увидеть, где именно заканчиваются отступы

Объединяются только отступы блоков

Из последнего примера можно узнать еще кое-что полезное о схлопывании отступов. В CSS2 возможно объединение внешних полей только тех объектов, которые соседствуют друг с другом вертикально: это верхние и нижние поля, если вы находитесь в горизонтальном режиме записи. Таким образом, левый и правый отступы не объединяются и не выходят за пределы обертки.

Примечание: следует помнить, что поля объединяются только в направлении блока, например, между абзацами.

Что препятствует схлопыванию отступов

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

Первое, что способно остановить схлопывание, — наличие между соседними элементами еще чего-нибудь.

Например, отступы пустого блока не объединятся, если они будут иметь видимые границы. В приведенном ниже примере был добавлен внутренний отступ (padding) размером в 1 пиксель. Благодаря этому, 50-пиксельные внешние отступы не схлопнулись.

Вполне логично, что если блок ничего не содержит, не имеет видимых границ и отступов, то он и должен быть невидимым. Это может быть пустой элемент абзаца, помещенный в разметку вашего лендинга. Вы, вероятно, не хотели бы, чтобы это привело к появлению больших пробелов между другими абзацами из-за того, что их отступы сохраняются. Добавьте что-нибудь в пустой блок, и вы получите эти пробелы.

Этот сценарий тоже логичен: если наличие обертки вокруг элементов, которая не отображается визуально, важно для семантики, вы, возможно, не захотите, чтобы из-за нее между элементами образовывались большие пустоты. Однако в нем было больше смысла, когда основной формой контента в интернете был текст, но теперь, когда в дизайне используется много других элементов, уже менее полезен.

Создание контекста форматирования блока

Новый контекст форматирования блока (BFC) также предотвращает коллапс отступов в содержащемся элементе. Если еще раз взглянуть на пример с первым и последним дочерними элементами, чьи отступы выходят за пределы обертки, и задать свойству display этой обертки значение flow-root, создавая, таким образом, новый BFC, то отступы останутся внутри.

Изменение значения свойства overflow на auto будет оказывать тот же эффект, так как это также создает новый BFC, хотя он может привести к появлению полос прокрутки, которые могут оказаться вам не нужны.

Контейнеры Flex и Grid

Контейнеры Flex и Grid устанавливают контексты форматирования Flex и Grid для своих дочерних элементов, так что те ведут себя в блочном макете несколько по-другому. К примеру, отступы в этих режимах верстки не схлопываются:

Если вернуться к примеру выше и сделать обертку во flex-контейнере, отображая элементы при помощи flex-direction: column, вы можете видеть, что отступы теперь заключены в обертку. Кроме того, отступы между соседними гибкими элементами не схлопываются, таким образом между этими элементами будет свободное пространство в 100 пикселей:

Что выбрать для своего лендинга?

Из-за схлопывания отступов нужно заранее продумать стратегию работы с ними на своем лендинге. Самое простое, что можно сделать, — это определить отступы только верхней или нижней части элементов. Таким образом, вам не придется быть свидетелем частого margin collapse, потому как сторона элемента с отступом будет прилегать к стороне другого элемента без отступа. Конечно, этот вариант не позволит вам решить проблему объединения отступов дочерних элементов, но, честно говоря, она не так часто встречается.

Понимание того, почему это происходит, позволит вам оперативно находить подходящее решение: можете, к примеру, превратить родительский блок во flex-контейнер (с помощью display: flow-root, который создаст BFC), либо добавить однопиксельный padding.

Знать, почему отступы объединяются и не объединяются, крайне важно, ведь только так вы сможете эффективно разобраться в каждой конкретной ситуации. Что бы вы ни выбрали, обязательно поделитесь этой информацией со своей командой. Довольно часто причина схлопывания отступов окутана ореолом тайны, так что бывает не сразу понятно, как всему этому противостоять. Комментарий в коде поможет решить проблему более оперативно.

Процентная запись

Когда в CSS вы используете проценты, надо помнить, что это всегда процент от чего-то.

Поля (и отступы), заданные с использованием процентов, всегда будут в процентах от инлайнового размера (ширина в горизонтальном режиме записи) родителя. Это означает, что при использовании процентов размер поля (или отступа) будет одинаковым по всему элементу.

В примере ниже обертка шириной 200 пикселей, внутри которой находится блок, чьи отступы равны 10%. Это означает, что отступы равны 20 пикселям, потому что 10% от 200 — это 20.

Отступы в ориентированном на поток мире

На протяжении всей статьи речь шла об отступах между соседствующими друг с другом по вертикали элементами, однако современный CSS заставляет смотреть на вещи в контексте потока. Поэтому, когда говорят о вертикальных отступах, говорят об отступах в размерности блока. Эти поля будут сверху и снизу, если мы находимся в горизонтальном режиме письма, или справа и слева, если в вертикальном.

При этом подходе проще говорить о начале блока и его конце, а не его верхе и низе. Для простоты CSS ввел спецификацию логических свойств и значений. Она сопоставляет относительные свойства потока с физическими словами позиционирования.

Для отступов это дает следующие сопоставления (если мы работаем на английском или в любом другом горизонтальном режиме записи с направлением текста слева направо):

margin-top = margin-block-start
margin-right = margin-inline-end
margin-bottom = margin-block-end
margin-left = margin-inline-start

Также появились два новых сокращения, которые позволяют устанавливать оба блока за раз или оба инлайн:

Блок при горизонтальном и вертикальном режимах письма.

Заключение

Теперь вы знаете об отступах CSS чуточку больше. Вкратце перечислим основные моменты, описанные в статье:

схлопывание отступов — это ситуация, когда меньший отступ вкладывается в больший. Понимание того, почему это происходит и как этому помешать, поможет вам решить любые проблемы, причиной которых может стать схлопывание;
установка отступов в одном направлении — одно из наиболее простых и эффективных решений проблемы их коллапса;
не забывайте делиться со своей командой найденными решениями и оставлять комментарии в коде;
оставьте в прошлом физические слова позиционирования (снизу, сверху и т.д.), поскольку сеть становится все более нейтральной к режиму записи.

В этой статье учебника речь пойдет о такой фундаментальной теме как блочная и строчная модель CSS, рассмотрим на чем строятся эти модели, научимся с Вами работать как с внешними, так и с внутренними отступами, а также рассмотрим некоторые нюансы, которые могут возникнуть при работе с ними.

HTML теги взаимодействует со множеством CSS свойств, которые оказывают на них различные действия и определяют, как они будут отображены браузером. Условно эти свойства можно разделить на видимые для пользователя, например, такие как задний фон, или границы элемента, а другие нельзя определить явно, но они наравне со всеми участвуют в форматировании элементов. К ним, например, относятся такие свойства как внутренние и внешние отступы элемента.

На веб-странице любому HTML элементу соответствует определённая прямоугольная область (блок). Во время рендеринга браузер определяет размеры и положение этих блоков, а также определяет их CSS свойства, чтобы применить их и отобразить на экране.

В CSS создана специальная блочная модель (англ. box model), которая описывает, из чего состоит любой блок и от каких свойств зависят его размеры. В этой модели каждый блок состоит из четырёх областей:

Рис. 74 Блочная модель CSS.

Внутренняя область (content area) – может содержать текст, изображения и другие теги, расположенные внутри содержимого. По умолчанию, размер внутренней области с содержимым задается свойствами width (ширина), min-width (минимальная ширина), max-width (максимальная ширина), height (высота), min-height (минимальная высота) и max-height (максимальная высота). Далее в учебнике мы рассмотрим, как и зачем изменить, применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов.

Внутренние отступы или поля элемента (padding area) – по сути это пустая область, которая окружает внутреннюю область (контент). Размеры внутренних отступов могут задаваться как для всех сторон элемента, так и по отдельности с различных сторон содержимого.

Область рамки или границы элемента (border area) – окружает внутренние отступы элемента (padding area). Ширина, цвет и стиль границы может задаваться как для всех сторон элемента, так и по отдельности для каждой стороны.

Внешние отступы (margin area) – добавляют пустое пространство вокруг элемента и определяют расстояние до соседних элементов. По аналогии с внутренними отступами размеры внешних отступов могут задаваться как для всех сторон элемента, так и по отдельности с различных сторон содержимого.

Теперь, когда Вы понимаете, на чем строится блочная модель CSS, пришло время рассмотреть каждую область элемента более детально.

Внешние и внутренние отступы элемента

Как мы с Вами установили выше, внутренние и внешние отступы добавляют промежуток вокруг содержимого элементов. Для управления этими отступами и отделения одного элемента от другого в CSS используется два универсальных свойства - margin для внешних отступов и padding для внутренних.

Давайте рассмотрим пример, в котором установим для первого изображения внутренние отступы, а для другого внешние отступы и посмотрим, что из этого выйдет:

Как вы можете заметить на изображении ниже, свойства padding (внутренние отступы) и margin (внешние отступы) визуально дают один и тот же эффект:

Рис. 75 Пример использования внешних и внутренних отступов в CSS.

Но в чем же разница? Давайте рассмотрим пример, в котором зададим отступы чуть больше, добавим границу и задний фон для наших изображений.

Вот тут нам и пригодятся те знания, которые мы получили, когда внимательно читали про базовое понятие блочной модели. Внутренний отступ добавляет промежуток между содержимым и границей элемента, а внешний отступ добавляет пустое пространство вокруг элемента и определяет расстояние до соседнего элемента, по этим причинам задний фон мы можем увидеть только на втором изображении:

Рис. 76 Отличие внешних и внутренних отступов в CSS.

Для управления внутренними и внешними отступами вы можете использовать любые единицы измерения CSS. Ранее в статье учебника "Единицы измерения CSS, размер шрифта" мы уже с вами рассматривали, какие единицы измерения более предпочтительны к использованию.

В вышерассмотренных примерах мы использовали универсальные свойства, которые задают отступы для всех сторон, мы к ним еще вернемся позднее, а сейчас хотелось бы продемонстрировать Вам, что в CSS допускается задавать отступы по отдельности для каждой из сторон. Для этих целей существует по 4 (четыре) CSS свойства для внутренних и внешних отступов, их легко запомнить, так как достаточно через дефис добавить к "универсальному свойству" название необходимой стороны:

Для внутренних отступов:

(определяет внутренний отступ сверху). (определяет внутренний отступ справа). (определяет внутренний отступ снизу). (определяет внутренний отступ слева).

Для внешних отступов:

(определяет внешний отступ сверху). (определяет внешний отступ справа). (определяет внешний отступ снизу). (определяет внешний отступ слева).

Давайте рассмотрим пример, в котором мы зададим внешний отступ для элемента, используя при этом процентные значения:

Мы с вами уже разбирали, как использовать процентные значения, но в нашем случае еще один пример лишним не будет. Что мы видим здесь, браузер вычисляет размер внешних отступов на основе ширины контейнера (блока) родительского элемента, в котором находятся изображения. В нашем случае контейнером (родительским элементом) является элемент , который имеет ширину в окне моего браузера 700 пикселей.

Значит, внешний отступ от левого края каждого изображения составит:

Размер изображения высчитывается по аналогии:

Данный пример нам дает адаптивность, так как если вы захотите изменить размер окна браузера, то размер изображений и размер внешних отступов тоже изменится в зависимости от ширины контейнера (блока). Что касается высоты (height), то браузер вычисляет её самостоятельно (значение этого свойства по умолчанию - auto ).

Рис. 77 Указание внешних отступов в процентах в CSS.

Мы не просто так начали изучение внешних и внутренних отступов, используя универсальные свойства margin и padding. Почему универсальные? Все просто, мы можем быстро установить значения отступов для всех четырех параметров одновременно в одном объявлении, при этом значения мы можем указывать совершенно разные, главное при этом соблюдать определённый порядок. Зачастую удобнее указать все свойства в одном объявлении, чем использовать для каждой стороны по отдельности свое свойство.

Давайте рассмотрим на примере указания значений для внутренних отступов:

При указании четырёх значений ( 5px 10px 15px 20px ) - порядок расстановки внутренних отступов будет следующий: Top ( 5px ) - Right ( 10px ) - Bottom ( 15px ) - Left ( 20px ).

Справочно: Для запоминания порядка расстановки внутренних отступов в одном объявлении рекомендуют использовать английское слово TRouBLe(где: T - top, R - right, B - bottom, L - left).

При указании трёх значений ( 5px 10px 15px ) - порядок расстановки внутренних отступов будет следующий: Top ( 5px ) - Right & Left ( 10px ) – Bottom ( 15px ).

При указании двух значений ( 5px 10px ) - первое значение ( 5px ) будет задавать размер внутреннего отступа от верха и от низа содержимого элемента, второе ( 10px ) значение - внутренние отступы слева и справа содержимого элемента.

При указании одного значения ( 5px ) - внутренний отступ со всех сторон будет одного размера - 5px .

Обращаю Ваше внимание, что если вам необходимо задать для какой-либо стороны нулевое значение, то единицы измерения при этом указывать не нужно. Например, укажем 1em для внутреннего отступа с левой и правой стороны, а для верха и низа зададим 0 (отсутствие отступа):

Как вы можете догадаться, для внешних отступов (margin) синтаксис аналогичен внутренним отступам (padding), давайте сразу рассмотрим на следующем примере:

Создали групповой селектор в котором указали размеры для наших блоков (ширина и высота 50px ).
В демонстративных целях для заголовка мы указали следующий порядок расстановки внешних отступов: Top ( 15px ) - Right & Left ( 20% ) - Bottom ( 2em ). Для класса .primer1 мы задали величину внешних отступов со всех сторон одного размера 2em .
Для класса .primer2 мы задали первым значением ( 25px ) размер внешнего отступа от верха и от низа, второе значение 75px – внешние отступы слева и справа.
Порядок расстановки внешних отступов для класса .primer3 будет следующим: Top ( - 40px ) - Right ( 25px ) - Bottom ( 25px ) - Left ( 100px ). В классе .primer3 мы использовали отрицательное значение внешнего отступа сверху, что привело к наслоению на предыдущий блок.

Обращаю Ваше внимание, что допускается использовать отрицательные значения для внешних отступов (margin). Для внутренних отступов (padding) отрицательные значения использовать не допускается.

Результат нашего примера:

Рис.78 Пример указания внешних отступов для элемента.

Нюансы работы с внешними отступами в CSS

Одной важной особенностью работы с отступами является то, что внешние отступы двух соседних элементов, расположенные друг над другом (вертикально) или вложенные друг в друга, могут накладываться. Браузеры вместо того, чтобы произвести расчеты по объединению значений внешних отступов, просто выбирают большее значение из них.

В данном примере мы указываем для класса .primer1 значение нижнего внешнего отступа равным 10px , а для второго класса .primer2 значение верхнего внешнего отступа 20px . После этого мы разместили два абзаца (HTML тег

) один под другим и задали им наши классы.

По логике расстояние между ними должно быть 30px ( 10px внешнего отступа снизу с первого класса + 20px внешнего отступа сверху второго элемента), а по факту мы получили отступ 20px , так как браузер выбрал большее. Обязательно при верстке учитывайте этот момент.

Как вы можете заметить значение отступа снизу у второго абзаца равно 16px - это значение, которое установлено браузером по умолчанию.

Рис. 79 Пример указания внешних отступов (нюансы применения).

Чтобы обойти такие конфликты, можно было использовать для одного из абзацев не внешние, а внутренние отступы (CSS свойство padding).

Строчные (линейные) элементы

Мы с Вами разобрали, что все браузеры обрабатывают элементы на веб-странице подобно блочному элементу, на самом деле не все так однозначно.

В CSS существует два типа элементов:

Важной особенностью блочных элементов является то, что они создают разрыв строки перед тегом и после него. Например, под эти критерии подходят такие элементы как таблицы (HTML тег ), маркированные и нумерованные списки (HTML теги и ), элементы списков (HTML тег ), абзацы (HTML тег

Что касается строчных (inline) элементов, то они не создают разрывов строк перед элементами и после них, а отображаются в одной строке с содержимым. Например, вы форматируете слово из предложения элементом (определяет жирное начертание текста), то это слово по-прежнему будет располагаться на одной строке с текстом, который, заключен в блочный элемент

Но как вы понимаете, у этих типов элементов существуют и другие отличия. К обоим элементам можно применять цветовые и фоновые параметры, шрифты и границы, а вот внешние и внутренние отступы строчных элементов браузеры обрабатывают уже по-другому.

Давайте рассмотрим пример:

Мы добавили внутренние и внешние отступы со всех сторон по 50px , установили границу и задний фон к строчному элементу. Что мы видим в результате:

Через установку верхнего или нижнего отступа увеличить высоту строчного элемента не получится.
Браузер добавляет отступы только с левой и правой сторон элемента.
Задний фон и граница элемента наслаивается на соседний элемент (см. 1 пункт).

Результат нашего примера:

Рис. 80 Пример указания внешних и внутренних отступов для строчных элементов.

Но как говорится на каждую хитрую строку найдется свой display : inline-block :

Это свойство хоть и оставляет элемент как строчный, но он будет восприниматься браузером как блочный, что позволит нам указывать для него все те свойства, которые мы указывали для блочных элементов, включая внешние и внутренние отступы. Такие элементы иногда называют как блочно-строчные.

Результат нашего примера:

Рис. 81 Пример указания внешних и внутренних отступов для блочно-строчных элементов.

Свойство display имеет очень широкое применение, ведь благодаря ему, мы можем заставить строчные элементы вести себя как блочные, или наоборот блочные элементы сделать строчными, и даже сделать элементы резиновыми (флекс), но об этом позднее.

Чтобы установить, что элемент будет восприниматься браузером как строчный, то необходимо использовать следующее объявление:

Для того чтобы установить, что элемент будет восприниматься браузером как блочный, то необходимо использовать следующее объявление:

Забегая вперед, хочу сказать, что вы сможете свойством display со значением none при необходимости скрывать тот или иной элемент в зависимости от разрешения, или устройства пользователя (адаптивный дизайн). Кроме того, это свойство активно применяется при работе различных скриптов.

Вопросы и задачи по теме

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

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:

Практическое задание № 20.

Подсказка: чтобы сформировать подобное меню Вам необходимо воспользоваться маркированным списком. Подробную информацию о использовании маркированных списков Вы сможете найти в предыдущей статье учебника "Работа со списками в CSS". Подумайте, что необходимо сделать, чтобы Вы смогли указать для гиперссылок внутренние отступы, и не забудьте указать, что при наведении на них цвет заднего фона меняется на orangered.

Продвинутое задание (создание горизонтального меню навигации):

Практическое задание № 21.

Подсказка: подумайте, что необходимо сделать с элементами маркированного списка, чтобы они выстроились в линейку?

Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню.
В таком случае к селектору следует добавить стилевое свойство display со значением inline, оно преобразует блочный элемент в строчный.

Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Ссылка 5

Как разместить элементы списка в колонки

Чтобы разместить элементы списка в несколько колонок, надо использовать тэг

Расположение ссылок в 4 колонки
Расположение ссылок в колонки автоматически
Расположение текста в 2 колонки

Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript.

Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.

Как добавить к номеру списка круглую скобку

Для этого используем конструкцию li:before, которая добавляет перед каждым элементом списка некое содержание. В нашем случае - скобка " ) ".
Свойство counter-increment необходимо для увеличения номера списка на единицу.
Значение mama - это уникальный идентификатор счетчика, имя его задаем сами.

Первый
Второй
Третий
Четвертый

Приведённым способом можно делать любой вид нумерованного списка,
например, заключить число в квадратные скобки, в стилях при этом изменится только одна строка.

Читайте также: