Как сделать отступ между ссылками в css

Работа с отступами, со свойством float и со списками на CSS

Сейчас мы с вами будем разбираться со свойствами margin и padding, которые задают отступы между элементами сайта. Давайте посмотрим, в чем между ними разница и как эти свойства применяются на практике.

Блок . Свойство margin

Итак, свойство margin задает отступ снаружи от границы элемента.

Давайте посмотрим, как это выглядит на практике.

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

Так код будет выглядеть в браузере:

А теперь давайте зададим margin в 30px внутреннему блоку:

Так код будет выглядеть в браузере:

Для определенной стороны

Отступ margin можно также задавать для определенных сторон. Для этого существуют следующие свойства: свойство margin-left для левого отступа, margin-right для правого, margin-top для верхнего и margin-bottom для нижнего.

Давайте поставим левый отступ в 30px с помощью margin-left:

Так код будет выглядеть в браузере:

А теперь верхний отступ в 30px с помощью margin-top:

Так код будет выглядеть в браузере:

А сейчас одновременно правый отступ 30px с помощью margin-right и нижний отступ 10px с помощью margin-bottom

Так код будет выглядеть в браузере:

Блок . Альтернативный вариант для разных сторон

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

Четыре значения

Давайте посмотрим на примере, как работает margin, когда ему задано четыре значения. Пусть у нас сделано так: margin: 10px 20px 30px 40px. В этом случае 10px это отступ сверху, 20px — справа, 30px — снизу, 40px — слева. То есть мы начинаем сверху и идем по часовой стрелке: верх-право-низ-лево.

Этому правилу следует подавляющее большинство CSS свойств (кроме border-radius, у него все начинается с верхнего левого угла и тоже идет по часовой стрелке, то есть, в принципе, и тут все похоже).

Так код будет выглядеть в браузере:

Два значения

Если передать свойству margin два значения, то первое будет задавать отступ одновременно сверху и снизу, а второе — одновременно и справа, и слева.

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

Так код будет выглядеть в браузере:

Три значения

Ну, и наконец, если передать свойству margin три значения, то первое будет задавать отступ сверху, третье — отступ снизу, а второе — одновременно отступ слева и справа.

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

Так код будет выглядеть в браузере:

Значение auto

Свойство margin применяется не только для задания отступов, но и для центрирования блочных элементов. Для этого правый и левый margin следует задать в значение auto.

В примере ниже внутренний блок станет по центру:

Так код будет выглядеть в браузере:

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

Давайте перепишем пример в сокращенной форме через одно свойство-сокращение margin (первое значение будет задавать верх-низ, а втрое — право-лево):

Так код будет выглядеть в браузере:

Если нам нужны разные верхний и нижний отступ margin, то можно передать три значения: первое задаст верхний отступ, третье — нижний, а второе задаст значение auto для правого и левого отступов:

Так код будет выглядеть в браузере:

В принципе, можно написать и четыре значения таким образом: margin: 30px auto 10px auto, но с тремя значениями писать все-таки меньше (зато сложнее понять).

Блок . Свойство padding

Мы с вами разобрали свойство margin, которое делает отступ наружу от границы. Существует также очень похожее свойство padding, которое делает отступ вовнутрь от границы.

Работает оно по такому же принципу — есть свойства padding-left, padding-right, padding-top и padding-bottom, которые задают отступ для разных сторон. Также для свойства padding можно задавать 1, 2, 3 или 4 значения по такому же принципу, как и в margin.

Единственное отличие — это то, что значения auto для свойства padding не существует.

Давайте теперь посмотрим на примерах, как работает свойство padding. Для начала приведу блок без отступов (у него текст прилип к границам):

Так код будет выглядеть в браузере:

А теперь зададим padding в 30px для всех сторон:

Так код будет выглядеть в браузере:

Свойство padding для определенной стороны

Давайте зададим отступы, используя padding-left, padding-right, padding-top и padding-bottom:

Так код будет выглядеть в браузере:

Блок . Свойство padding для разных сторон

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

Четыре значения

Так код будет выглядеть в браузере:

Два значения

Так код будет выглядеть в браузере:

Три значения

Так код будет выглядеть в браузере:

Блок . Расширение элемента

По умолчанию добавление padding расширяет элемент: если мы задали ширину width 100px и padding-left в 20px, то реальная ширина элемента будет 120px. А если мы зададим еще и border-left в 10px, то реальная ширина элемента станет 130px. То есть и padding, и border расширяют блок (и по ширине, и по высоте).

В следующем примере оба блока имеют одинаковую высоту и ширину, однако у второго блока padding задан, а у первого — нет. Посмотрите, как отличаются их размеры:

А сейчас оба блока имеют одинаковую высоту и ширину, однако у второго блока задана граница в 20px, а у первого — нет. Посмотрите, как отличаются их размеры:

Блок . Свойства outline и box-sizing

Если вам мешает расширение блоков из-за padding и границы, их поведение можно исправить свойствами outline (используется вместо границы) и box-sizing (отменяет расширение блоков).

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

Блок . Работа с маркерами списков

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

Например, для списка ul можно сделать маркеры в виде квадратов или кружков, а для списка ol — нумерацию не только в виде цифр, а в виде латинских или греческих букв.

Делается это с помощью свойства list-style-type. Давайте посмотрим, какие значения оно может принимать для списка ul:

Значение square

Значение square позволяет сделать маркеры в виде квадратиков:

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

Значение circle

Значение circle позволяет сделать маркеры в виде кружков:

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

Значение disc

Значение disc делает маркеры в виде закрашенных кружков (это значение по умолчанию):

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

Значение none

Значение none убирает маркеры совсем:

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

Значения для списка ol

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

Так код будет выглядеть в браузере:

  1. Первый пункт.
  2. Второй пункт.
  3. Третий пункт.
  4. Четвертый пункт.
  5. Пятый пункт.

А теперь сделаем нумерацию не числами, а маленькими латинскими буквами:

Так код будет выглядеть в браузере:

  1. Первый пункт.
  2. Второй пункт.
  3. Третий пункт.
  4. Четвертый пункт.
  5. Пятый пункт.

Весь список возможных значений для ol очень большой и я не буду приводить его здесь. Смотрите его в справочнике CSS для свойства list-style-type.

Блок . Маркер в виде картинки

Можно также задавать свои маркеры. Для этого необходимо иметь картинку, которую вы бы хотели сделать для маркеров списка, и подключить ее с помощью свойства list-style-image: url("путь к картинке").

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

Блок . Позиция маркеров списков

По умолчанию маркеры списка не входят в сам список .

Чтобы понять, что имеется ввиду, давайте разберем следующий пример. В данном случае тегу ul обнулен padding и, казалось бы, маркеры списка должны прижиматься к границе блока, но они вылазят наружу! Это говорит о том, что не они реагируют на padding, а текст списка:

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

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

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

Блок . Свойство list-style

Существует также свойство-сокращение list-style, которое позволяет одновременно задать тип маркера, его позицию и картинку.

Блок . Ограничение высоты и ширины

Блок . Свойство display

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

Блок . Свойство float

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

Расстояние между ссылками css

Для управления межстрочным расстоянием (оно еще называется интерлиньяжем) применяется стилевое свойство line-height . В качестве значения обычно указывается число, которое определяет межстрочный интервал. Например, line-height : 2 устанавливает двойной интервал, а line-height : 1.5 — полуторный (пример 1).

Пример 1. Интерлиньяж в тексте

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 1. Вид текста при разном межстрочном расстоянии

Значение line-height допустимо задавать и в других единицах CSS, например, пикселах (px), процентах (%) и др. В данном примере для первого абзаца установлен полуторный интерлиньяж, а для второго — межстрочное расстояние равно 0.9em .

Чем сложно-то?) Общему блоку width: 100% , Ссылкам всем одинаковый padding-right — это и будет одинаковым расстоянием, и процентами подберите одинаковый width каждой ссылке, так, чтобы они были на всё меню

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

А сама реализация этого на CSS, на мой взгляд, лучше всего будет на flex, с указание выравнивания по ширине.
Но можно попробовать и через inline-block и снова таки выравнивание по ширине, примерно вот так:

В этой статье я хотел бы рассказать, как правильно расставлять поля ( padding ) и отступы ( margin ) в CSS.

Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C. В боксовой модели ( box model ) поля — это расстояние между контентом ( content ) и границей блока ( border ). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.

Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина ( width ) и высота ( height ) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing.

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

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

Это блок новостей news . Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title , news__list и news__more-link .

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

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

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

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

Учитывая это, задаем для заголовка отступ снизу, а для ссылки «Другие новости» отступ сверху.

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

Но в этом случае при убирании ссылки «Другие новости» внизу остается лишний отступ. То же самое справедливо и для заголовка. Очевидно, что первый вариант является более правильным, поскольку позволяет гибко изменять внешний вид блока.

Теперь нужно задать отступы между отдельными новостями. Опять же, нужно принять во внимание, что количество новостей может меняться, и в списке может быть только одна новость.

Можно задать для каждой новости кроме первой отступ сверху, либо для каждой новости кроме последней отступ снизу. Первый вариант более предпочтителен, поскольку псевдоселектор :first-child был добавлен в спецификации CSS 2.1 и имеет более широкую поддержку, в отличие от псевдоселектора :last-child , который был добавлен только в спецификации CSS версии 3.0.

Таким образом, правильная расстановка полей и отступов позволяет гибко менять внешний вид любого блока без внесения изменений в стили и без нарушений в дизайне. Самое главное — определить, какие элементы блока являются основными (обязательными), а какие опциональными.

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

В этом случае можно использовать следующий способ задания отступов.

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

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

Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ — это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px , а другому отступ сверху в 20px , отступ между ними будет не 50px , а 30px .

То есть произойдет наложение отступов, и отступ между блоками будет равен наибольшему отступу, а не сумме отступов. Этот эффект также называют «схлопыванием».

Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля ( padding ) также суммируются.

Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px , а для заголовка второго уровня отступ сверху 20px и снизу 10px , а для всех параграфов зададим отступ сверху 10px .

Теперь заголовок h2 можно расположить как после заголовка h1 , так и после параграфа. В любом случае отступ сверху не будет превышать 24px .

Общие правила

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

  1. Если соседние элементы имеют одинаковые отступы, то лучше задавать их родительскому контейнеру, а не элементам.
  2. При задании отступов между элементами, следует учитывать, обязательный это элемент или опциональный.
  3. Для списка однотипных элементов — не забывать о том, что число элементов может варьироваться.
  4. Помнить о наложении вертикальных отступов и использовать эту особенность там, где она принесет пользу.
  • Скопировать ссылку
  • Facebook
  • Twitter
  • ВКонтакте
  • Telegram
  • Pocket

Похожие публикации

  • 14 июня 2017 в 15:27

5 возможностей LESS, о которых вы могли не знать

Все способы вертикального выравнивания в CSS

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

В этом случае у вас растет специфичность (specificity), что ухудшает парсинг CSS кода при создании CSSOM.

.news__list-item:not(:first-child) в этом случае лучше чем .news__list-item + .news__list-item

На стековерфлоу. Если коротко — это один из самых медленных селекторов из-за особенностей браузеров разбора селекторов.

Вдобавок, может простреливать в очень неожиданные места.

Во-первых, приводить в пример статьи 2009-го года, где рассматривается производительность IE7,8 — как минимум не очень корректно. В реальности хоть сколько-нибудь заметные проблемы с производительностью могут наблюдаться, наверное, в случае каскада, когда универсальный селектор стоит справа, например ".class * " (помним, что браузеры разбирают селекторы справа налево, даже по вашей ссылке это написано), и стили для данного селектора вызывают reflow страницы.

Вот, например, есть статья немного посвежее (2012 год), показывающая, что разницы между одним универсальным селектором, и полным отсутствием селекторов — практически нет.

Вот статья 2014 года, показывающая, что на построение DOM и layout’а тратится значительно больше времени, чем на разбор селекторов.

Я это всё к чему — браузеры делают умные люди, и в наши дни они (браузеры) умеют оптимизировать отображение страничек намного лучше, чем во времена того же IE8. Если специально не стрелять себе в ногу, то сложность селекторов — это не первое, о чем стоит задумываться.

В вашем комментарии — да, но в комментарии MiXei4, на который я отвечал, конструкция

делает ровно то же, что и предложенная мной

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

будет работать только с уже выбранным массивом .news__list-item
Да и визуально сразу понятно что речь о .news__list-item в рамках которого любой элемент кроме :first-child

> так как любое * заставит просмотреть все элементы

Поскольку селекторы разбираются браузером справа налево, сначала браузер все равно выберет массив `.news__list-item` (самый правый элемент селектора). Так что на производительности это не отразится.

`*` — зло, когда он стоит справа в селекторе.

Ждал именно этого замечания. Да, сейчас браузер разбирает справа налево, но в случае с "* + X" нет гарантии, что браузер не преобразует этот селектор перед разбором в «X + *» для каких-то своих оптимизаций
Так же как нет гарантий, что следующее поколение движков не начнет разбирать селекторы слева направо

Тоесть использование "* + X" это хак, который может перестать работать, поэтому я и написал, что есть проблема в том числе и с оптимизированостью, потому что условно браузер должен просмотреть все элементы, но так как мы знаем, что браузер разбирает справо налево, то мы абузим «недокументированную» фичу, если продолжаем так делать

Выходит, в этом случае, браузер сначала найдёт все last-child теги на странице, а затем уже будет проверять какой из них находится внутри .box? Разве это имеет смысл?

Сначала найдёт все элементы, потом из них выберет те, которые внутри .box, потом от них возьмет :last-child
Как будет на самом деле — неизвестно, движок css современных браузеров загадка, до тех пор, пока кто нибудь не возьмется провести актуальное исследование

Одно ясно точно, если используется .box > *:last-child, и хочется привести к более БЭМ подходу, то есть несколько вариантов, например использование модификаторов:

Наглядное и простое изложение, спасибо! С переводом терминоголоией margin и padding не везло раньше, было много путаницы.

В боксовой модели (box model) поля — это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.

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

Я для этого использую миксин:

@mixin ritm($valueTop, $valueBottom:$valueTop) <

2. Не стоит обеспечивать отступ между соседними блоками за счёт отступов дочерних элементов.

3. А отступы это расстояние между границей блока и границей соседнего или родительского элемента.
Верно, но тут есть тонкий момент. Стоит сделать оговорку, что margin является неотъемлемой частью блока, хоть и воспринимается как нечто попутное. Вопрос в том, что размеры блока, а конкретно его ширина, не всегда одно и тоже, что значение свойства width. Width — это ширина части бокса от border до border, либо размер контентной области в зависимости от боксовой модели, но размеры блока остаются неизменные, это стоит понимать.

Each box has four edges: the margin edge, border edge, padding edge, and content edge.
developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

В ней у каждого бокса есть 4 области: margin (внешние отступы), border (рамка), padding (внутренние поля), и content (контент или содержимое).
developer.mozilla.org/ru/docs/Web/CSS/box_model

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas;
www.w3.org/TR/CSS2/box.html#box-dimensions

4. Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing.
Для полноты картины, есть случаи, когда одинаковые значения margin и padding, даже при выше описанных условиях, производят различный результат, например margin: auto; ≠ padding: auto; codepen.io/matovas/pen/KzyLJZ

5. Отступы же всегда задаются снаружи элемента.
Перефразируем, «Отступы (margin) в обеих боксовых моделях (border-box и content-box), не влияют на значение width блока.»

6. Тонкости перевода, холивара ради,
— граница блока ≠ border блока, бордер — это border, а граница блока — это граница/край блока
— block area = область блока (читай размеры блока), но
— block area ≠ области ограниченной border&#8217;ом.
Тут стоит оговориться, наука наукой, а ежедневная работа вносит свои правки в лексикон разработчиков.

Как задать расстояние между пунктами списка?

Вертикальное расстояние между пунктами списка можно задать двумя способами. Первый, самый простой — добавить к селектору li свойство margin-bottom, которое задаёт отступ снизу для каждого элемента <li> (пример 1). В качестве значения можно использовать пиксели, em, rem и другие единицы.

Пример 1. Использование margin-bottom

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Список</title> <style> li < margin-bottom: 1em; /* Расстояние снизу */ ></style> </head> <body> <p>Работа со временем</p> <ul> <li>создание пунктуальности (никогда не будете никуда опаздывать);</li> <li>излечение от пунктуальности (никогда никуда не будете торопиться);</li> <li>изменение восприятия времени и часов.</li> </ul> </body> </html>

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

Расстояние между пунктами списка

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

Второй способ следующий — для селектора li добавляем свойство line-height, значение в виде дробного числа подбираем самостоятельно. В примере 2 используется значение 1.8.

Пример 2. Использование line-height

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Список</title> <style> li < line-height: 1.8; /* Межстрочное расстояние */ ></style> </head> <body> <p>Работа со временем</p> <ul> <li>создание пунктуальности (никогда не будете никуда опаздывать);</li> <li>излечение от пунктуальности (никогда никуда не будете торопиться);</li> <li>изменение восприятия времени и часов.</li> </ul> </body> </html>

Этот способ менее универсален, поскольку line-height воздействует на все строки. Вид списка зависит от переносов строк; если переносов нет, то мы получим результат, показанный на рис. 2. Если в тексте имеются переносы, то получим результат как на рис. 3.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *