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

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

  • автор:

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

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

Светлая тема Тёмная тема
Поделиться

  • Учебник
  • CSS для JavaScript-разработчика
  • Знаете ли вы селекторы?

Отступ между элементами, размер одна строка

важность: 4

Есть список UL/LI .

  • Маша
  • Паша
  • Даша
  • Женя
  • Саша
  • Гоша

Размеры шрифта и строки заданы стилем:

body < font: 14px/1.5 serif; >

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

  • Размер отступа: ровно 1 строка.
  • Нужно добавить только одно правило CSS с одним псевдоселектором, можно использовать CSS3.
  • Не должно быть лишних отступов сверху и снизу списка.

Выбор элементов

Выбор элементов

Для выбора элементов, начиная с первого, можно использовать селектор nth-child.

Его вид: li:nth-child(n+2) , т.к. n идёт от нуля, соответственно первым будет второй элемент ( n=0 ), что нам и нужно.

Решение

Отступ, размером в одну строку, при line-height: 1.5 – это 1.5em .

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

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

CSS отступы

Отступы — это промежуток снаружи элемента за пределами любых установленных рамок.

У этого элемента есть отступ в 70px.

В CSS есть свойства, позволяющие определять отступ для каждой стороны элемента:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Все свойства отступов могут принимать следующие значения:

  • auto — значение отступа вычисляет браузер
  • ширина — значение в единицах измерения длины (px, pt, cm и т.д.)
  • % — значение в процентах от ширины содержащего элемента
  • inherit — указывает на то, что значение должно наследоваться от родительского элемента

Также, можно использовать отрицательные значения.

В следующем примере установим отступы для всех четырех сторон элемента

:

margin — Краткая форма записи

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

CSS свойство margin является короткой формой записи следующих свойств определения отступов:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Это работает так:

Если у свойства margin определено четыре значения:

  • margin: 25px 50px 75px 100px;
    • верхний отступ 25px
    • правый отступ 50px
    • нижний отступ 75px
    • левый отступ 100px

    Если у свойства margin определено три значения:

    • margin: 25px 50px 75px;
      • верхний отступ 25px
      • правый и левый отступы 50px
      • нижний отступ 75px

      Если у свойства margin определено два значения:

      • margin: 25px 50px;
        • верхний и нижний отступы 25px
        • правый и левый отступы 50px

        Если у свойства margin определено одно значение:

        • margin: 25px;
          • все четыре отступа 25px

          Значение auto

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

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

          Значение inherit

          В следующем примере значение левого отступа элемента

          наследуется от родительского элемента ():

           div < border: 1px solid red; margin-left: 100px; >p.ex1

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

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

          Это происходит только с верхними и нижними отступами и не случается с левыми и правыми отступами!

          Посмотрите на следующий пример:

           h1 < margin: 0 0 50px 0; >h2

          Здесь у элемента нижний отступ установлен в 50px, а у элемента верхний отступ установлен в 20px.

          Логика подсказывает, что вертикальный отступ между элементами и должен быть 70px (50px + 20px). Однако из-за схлопывания отступов действительный вертикальный отступ между этими элементами будет 50px.

          CSS поля

          Поля — это промежуток вокруг содержимого элемента внутри любых установленных рамок.

          У этого элемента есть поля в 70px.

          В CSS есть свойства, позволяющие определять поле для каждой стороны элемента:

          • padding-top
          • padding-right
          • padding-bottom
          • padding-left

          Все свойства полей могут принимать следующие значения:

          • ширина — значение в единицах измерения длины (px, pt, cm и т.д.)
          • % — значение в процентах от ширины содержащего элемента
          • inherit — указывает на то, что значение должно наследоваться от родительского элемента

          Внимание! Отрицательные значения не допустимы.

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

          padding — Краткая форма записи

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

          CSS свойство padding является короткой формой записи следующих свойств определения полей:

          • padding-top
          • padding-right
          • padding-bottom
          • padding-left

          Это работает так:

          Если у свойства padding определено четыре значения:

          • padding: 25px 50px 75px 100px;
            • верхнее поле 25px
            • правое поле 50px
            • нижнее поле 75px
            • левое поле 100px

            Если у свойства padding определено три значения:

            • padding: 25px 50px 75px;
              • верхнее поле 25px
              • правое и левое поля 50px
              • нижнее поле 75px

              Если у свойства padding определено два значения:

              • padding: 25px 50px;
                • верхнее и нижнее поля 25px
                • правое и левое поля 50px

                Если у свойства padding определено одно значение:

                • padding: 25px;
                  • все четыре поля 25px

                  Ширина полей и элемента

                  CSS свойство width определяет ширину области с содержимым элемента. Область с содержимым — это пространство внутри полей, рамок и отступов элемента (блочная модель).

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

                  В следующем примере для элемента устанавливается ширина в 300px. Однако реальная ширина элемента будет 350px (300px + 25px левого поля + 25px правого поля):

                  Чтобы ширина была 300px без учета полей, можно использовать свойство box-sizing . Это будет определять реальную ширину элемента — если ширина полей будет увеличиваться, доступное пространство содержимого будет уменьшаться.

                  В своем файле таблиц стилей измените код CSS для тега следующим образом:

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

                  Все CSS свойства определения отступов и полей

                  Свойство Описание
                  margin Короткое свойство, определяющее размер всех отступов элемента за одну декларацию
                  margin-bottom Определяет размер нижнего отступа элемента
                  margin-left Определяет размер левого отступа элемента
                  margin-right Определяет размер правого отступа элемента
                  margin-top Определяет размер верхнего отступа элемента
                  padding Короткое свойство, определяющее размер всех полей элемента за одну декларацию
                  padding-bottom Определяет размер нижнего поля элемента
                  padding-left Определяет размер левого поля элемента
                  padding-right Определяет размер правого поля элемента
                  padding-top Определяет размер верхнего поля элемента

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

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

                  Свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top, margin-right, margin-bottom и margin-left.

                  У свойства margin есть одна особенность — оно не дает нужный результат когда применятся к строчным элементам. Например ссылкам. Чтобы исправить ситуацию, нужно изменить свойство display у тега на значение inline-block;

                  Исходный HTML документ:

                   href="#">ссылка 1  href="#">ссылка 2  href="#">ссылка 3  href="#">ссылка 4 

                  Применив стиле ниже, мы добавим каждой ссылке вкруг отступ по 40px.

                  a  display: inline-block; margin: 40px; > 

                  Как работает margin. Правила внешних отступов

                  Любой элемент на странице сайта представляет собой прямоугольный блок, который имеет ширину и высоту, у него могут быть внутренние и внешние отступы и границы. Это и есть блочная модель — box model.

                  Типичный прямоугольный блок с включённой границей и отступами.

                  Внешние отступы margin определяют расстояние между элементом и его окружением. Указывают отступы в пикселях ( px ), условных единицах ( em ), процентах ( % ) по отношению к ширине родительского блока или задают значение auto . Благодаря margin блоки не слипаются и располагаются на отведённом для них по макету месте.

                  Особенности отступов блочных элементов

                  У любой HTML-страницы есть базовое оформление, даже если вы ещё не подключили стили. Например, если вы создадите простой текстовый документ, то увидите, что заголовки имеют определённый размер, ссылки оформляются подчёркиванием и синим цветом, элементы имеют отступы. За это оформление отвечают браузерные стили, которые определяют создатели браузеров, например, Safari, Firefox. Поэтому в разных браузерах стили могут различаться, что может отразиться на вёрстке. Важно учитывать это и тестировать сайт в разных браузерах.

                  Пример простой страницы с браузерными стилями по умолчанию

                  Списки, параграфы, заголовки и цитаты имеют внешние отступы. По умолчанию установлены верхние и нижние отступы — margin-top и margin-bottom .

                  Жёлтым цветом показаны вертикальные отступы у списка

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

                  Правила внешних отступов

                  Схлопывание

                  ��️ margin collapsing — это схлопывание внешних отступов. Такое поведение наблюдается только у вертикальных внешних отступов.

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

                  Нижний отступ первого элемента схлопывается с верхним отступом следующего элемента

                  ❌ Вертикальные отступы не схлопываются между элементами с position: absolute .

                  А также, если у родительского элемента указано свойство display: grid или display: flex , то отступы дочерних элементов не схлопнутся.

                  Правило, которое поможет избежать схлопывания:

                  ⭐ Задавайте элементам только нижний отступ — margin-bottom .

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

                  Верхние отступы равны нулю, элемент соприкасается нижним отступом по следующим элементом

                  Выпадение отступов

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

                  Верхний отступ первого элемента выпадает из контейнера

                  ✅ Чтобы вертикальные отступы дочерних элементов не выпадали и не мешали расчётам при вёрстке рекомендуется:

                  • всегда обнулять верхние отступы — margin-top: 0;
                  • обнулять нижний отступ margin-bottom у последнего дочернего элемента
                  .item:last-child

                  Вставка изображений

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

                  При вставке изображений появляется небольшое пространство под картинкой

                  Чтобы убрать пространство под изображением, нужно сменить тип отображения на block .

                  .mountains

                  ⭐ Шпаргалка по правилам:

                  1. Сбрасывайте браузерные стили по умолчанию.
                  2. Задавайте текстовым элементам нижний отступ margin-bottom .
                  3. Сбрасывайте вертикальные отступы последнего дочернего элемента.
                  4. Изображениям, добавленным с помощью тега , меняйте тип отображения на block .

                  Материалы по теме

                  • Чем отличаются margin и padding
                  • Как изменить ширину элемента. Свойство width
                  • Когда в вёрстке нужна высота. CSS-свойство height

                  «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

                  Читать дальше

                  Новое в 2023 — text-wrap: balance

                  Новое в 2023 — text-wrap: balance

                  В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

                  Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

                  Вот пример заголовка c text-wrap: balance и без него.

                  На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

                  • 13 ноября 2023

                  Знакомство с CSS

                  Знакомство с CSS

                  После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

                  CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

                  • 1 ноября 2023

                  Увеличение ссылки при наведении

                  Увеличение ссылки при наведении

                  Задача: плавно увеличить ссылку при наведении.

                  Решение:

                  a < display: inline-block; transition: transform 0.3s ease; >a:hover

                  Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

                  Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

                  • 13 октября 2023

                  WOFF больше не нужен

                  WOFF больше не нужен

                  Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

                  Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

                  Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

                  Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

                  @font-face

                  Остался всего один формат. Просто, скажите?

                  Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

                  • IE 11, 10, 9, 8, 7, …
                  • Chrome 4–35
                  • Edge 12 и 13
                  • Safari 3–9.1
                  • Firefox 2–38
                  • Opera 22 и ниже
                  • Android 4.4.4 KitKat и ниже (а это
                  • Safari на iOS 3.2–9.3

                  Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

                  А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

                  С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

                  И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

                  • 23 сентября 2023

                  Трясём пароль с помощью CSS

                  Трясём пароль с помощью CSS

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

                  Вот что получится в итоге:

                  • 7 сентября 2023

                  Как сделать тёмную тему на сайте

                  Как сделать тёмную тему на сайте

                  Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

                  HTML

                  Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

                  CSS (styles.css):

                  Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

                  body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

                  JavaScript (script.js)

                  Этот код нужен, чтобы переключать тему при нажатии на кнопку:

                  document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

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

                  • 29 августа 2023

                  4 способа центрировать текст в CSS

                  4 способа центрировать текст в CSS

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

                  Метод 1: Flexbox

                  Flexbox — это один из самых простых и эффективных способов центрирования.

                  Заворачиваем текст в с классом center-both :

                   

                  Центрированный текст

                  .center-both

                  Метод 2: CSS Grid

                  HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

                  .center-both

                  Метод 3: позиционирование и Transform

                  Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

                  внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

                  .center-both < position: relative; >.center-both p

                  HTML остается таким же. Вот что получается:

                  Плохой метод: использование line-height

                  Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

                  .center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

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

                  Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

                  • 28 августа 2023

                  Как скруглить рамку. CSS-свойство border-radius

                  Как скруглить рамку. CSS-свойство border-radius

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

                  • 28 июля 2023

                  CSS-свойство contain

                  CSS-свойство contain

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

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

                  ⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

                  Синтаксис

                  .container
                  • 14 июля 2023

                  Как задать позицию и размер элемента. CSS-свойство inset

                  Как задать позицию и размер элемента. CSS-свойство inset

                  CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

                  Синтаксис

                  .element
                  • 13 июля 2023

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

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