Как сделать отступ между блоками в css: Отступы между блоков | htmlbook.ru – Css расстояние между блоками. Расстановка полей и отступов в CSS

Css расстояние между блоками. Расстановка полей и отступов в CSS

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

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

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

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

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

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

Новости

Другие новости

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

News { padding: 20px 25px; }

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

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

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

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

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

News__title { margin-bottom: 10px; } .news__more-link { margin-top: 12px; }

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

News__list { margin: 10px 0 12px 0; }

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

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

News__list-item { margin-top: 18px; } .news__list-item:first-child { margin-top: 0; }

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

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

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

Popup__header + .popup__text { margin-top: 15px; }

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

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

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

границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px , а другому отступ сверху в 20px , отступ между ними будет не 50px , а 30px .

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

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

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

h2 { margin-bottom: 24px; } h3 { margin-top: 24px; margin-bottom: 12px; } p { margin-top: 12px; }

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

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

Подводя итог, я бы

Внутренние отступы CSS, внешние отступы CSS

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

Для примера создадим блок и установим ему внутренние отступы 30 пикселей, а внешние 50 пикселей. Чтобы видеть внешний отступ, создадим ещё один блок. Установим блокам рамки для определения края блока.

Стиль:

+

7
8
9
10

div
  {
  border: 1px solid Red;
  }

HTML код:

14
15

<div>Контент</div>
<div>Соседний блок</div>

Обратите внимание - второй блок, которому не установлены отступы, не касается краёв страницы, а находится от них на определённом расстоянии. Это происходит потому, что у тега <body> есть внутренние отступы. Их можно отменить, то есть, сделать равными нулю, как и у любого элемента.

ВАЖНО: Внешние отступы соседних блоков не суммируются. Расстояние между блоками равно большему отступу. Например, если у одного блока margin равно 20 пикселей, а у второго блока margin равно 10 пикселей, то расстояние между блоками будет 20 пикселей.

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

Добавим на страницу блок и установим ему внутренние отступы сверху и слева:

16

<div>Контент</div>

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

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

  • сначала отступ сверху
  • затем справа
  • затем снизу
  • затем слева

Если какой-то отсуп не нужен, то ему можно указать нулевое значение.

Пример:

17

<div>Контент</div>

html - Как сделать отступы между блоками?

введите сюда описание изображения

Как увеличить отступы между этими блоками? (При увеличении размера сетки блоки съезжают на сл. строку.

a.links {
  color: #094f83;
  position: relative;
  text-decoration: underline;
  font-size: 1.1em;
  font-family: "Open Sans Bold", sans-serif;
  font-weight: bold;
  letter-spacing: 0.5px;
  right: 30px;
}

img.linksimg {
  width: 100%;
  position: relative;
  top: 10px;
  right: 30px;
}

p.textonlinks {
  font-family: "Open Sans", sans-serif;
  font-size: 0.875em;
  position: relative;
  right: 30px;
  top: 15px;
}
<div>

  <div>
    <a href="">Тарехова Катя</a>
    <img src="img/linkspng.png" alt="">
    <p>
      Открылась мобильная версия сайта<br> Стамотологии «Олиус» Вы можете:<br> — записываться на прием — читать новые статьи — следить за акциями...
    </p>
    <a href="">подробнее»</a>
  </div>
  <div>
    <a href="">Тарехова Катя</a>
    <img src="img/linkspng.png" alt="">
    <p>
      Открылась мобильная версия сайта<br> Стамотологии «Олиус» Вы можете:<br> — записываться на прием — читать новые статьи — следить за акциями...
    </p>
    <a href="">подробнее»</a>
  </div>
  <div>
    <a href="">Тарехова Катя</a>
    <img src="img/linkspng.png" alt="">
    <p>
      Открылась мобильная версия сайта<br> Стамотологии «Олиус» Вы можете:<br> — записываться на прием — читать новые статьи — следить за акциями...
    </p>
    <a href="">подробнее»</a>
  </div>
  <div>
    <a href="">Тарехова Катя</a>
    <img src="img/linkspng.png" alt="">
    <p>
      Открылась мобильная версия сайта<br> Стамотологии «Олиус» Вы можете:<br> — записываться на прием — читать новые статьи — следить за акциями...
    </p>
    <a href="">подробнее»</a>
  </div>
</div>

css - Отступы между блоками в bootstrap

Всем привет. Как сделать между блоками отступ?

Вот что у меня есть

введите сюда описание изображения

Нужно чтобы было так

введите сюда описание изображения

мой код:

<div>
            <?= Html::img(Url::to('/uploads/politics/9859aeecafa753b42b613e63d4872b54_presydent_ua.jpg'), ['alt' => '9859aeecafa753b42b613e63d4872b54_presydent_ua.jpg']) ?>
            <p>Петро Порошенко</p>
            <p>Президент</p>
        </div>
        <div>
            <?= Html::img(Url::to('/uploads/politics/a521671ed3207abf6735d35b1b9a9b0a_800px-Yulia_Tymoshenko_2018_Vadim_Chuprina.jpg'), ['alt' => '9859aeecafa753b42b613e63d4872b54_presydent_ua.jpg']) ?>
            <p>Петро Порошенко</p>
            <p>Президент</p>
        </div>
        <div>
            <?= Html::img(Url::to('/uploads/politics/9859aeecafa753b42b613e63d4872b54_presydent_ua.jpg'), ['alt' => '9859aeecafa753b42b613e63d4872b54_presydent_ua.jpg']) ?>
            <p>Петро Порошенко</p>
            <p>Президент</p>
        </div>
        <div>
            <?= Html::img(Url::to('/uploads/politics/a521671ed3207abf6735d35b1b9a9b0a_800px-Yulia_Tymoshenko_2018_Vadim_Chuprina.jpg'), ['alt' => '9859aeecafa753b42b613e63d4872b54_presydent_ua.jpg']) ?>
            <p>Петро Порошенко</p>
            <p>Президент</p>
        </div>

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

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