Что значит padding. Как установить CSS margin и padding (и крутые советы по раскладке)

Оставьте комментарий 6,950

Источник: Margin or padding?
Philipp Sporrer.
Перевод: vl49.

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

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

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

В данном примере можно выделить два типа интервалов:

  • между карточками (голубые);
  • между карточками и их контейнером (зеленые);

    • Здесь очень важно понимать, что мы имеем дело с двумя разными понятиями, которые при компоновке не должны быть взаимосвязаны. То есть если мне понадобиться изменить расстояние между карточками и их контейнером, к примеру, до 24 пикселей, то это не должно каким-либо образом влиять на интервал между самими карточками.

    Реализация примера с помощью CSS?

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

    Container {
    padding: 16px;
    }
    .card +.card {
    margin: 0 0 0 8px;
    }

    Всего-навсего 2 селектора и 2 правила.

    Какую же функцию выполняет знак плюса?

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

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

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

    Все работает прекрасно до тех пор, пока нам не понадобиться разместить рядом с карточками что-нибудь другое, отличное от карточки. Ну, скажем, кнопку «Добавить карточку» ("Add card" ):

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

    Лоботомированная сова *+* .

    А что, похоже. Несмотря на забавную ассоциацию, этот метод прекрасно работает, и я его постоянно использую с тех пор как узнал о его существовании. Итак, к чему это все? Вот взгляните на соответствующий CSS код:

    Container {
    padding: 16px;
    }
    /* ну что, узнали совушку лоботомизированную? 😜 */
    .container > * + * {
    margin: 0 0 0 8px;
    }

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

    В итоге.

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

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

    padding — для промежутков между контейнером и его контентом.

    margin — для промежутков между находящимися внутри контейнера элементами.

    В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.

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

    Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками

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

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

    Отступы:

    • padding-top: значение;
    • padding-right: значение;
    • padding-bottom: значение;
    • padding-left: значение;

    Поля:

    • margin-top: значение;
    • margin-right: значение;
    • margin-bottom: значение;
    • margin-left: значение;

    Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .

    Также существует очень удобная вещь как сокращенная запись margin и padding CSS . Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:

    • 4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева: padding: 2px 4px 5px 10px;
    • 3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней: padding: 3px 6px 9px;
    • 2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой: padding: 6px 12px;
    • 1 значение: задаются одинаковые отступы для всех сторон элемента: padding: 3px;

    Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.

    Схлопывание margin

    Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.

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


    Расстояние между блоками равно большему из значений

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

    • Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
    • Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
      20 + (-18) = 20 — 18 = 2 пикселя.
    • Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 -8 . Итоговый размер поля равен -8 пикселей.
    • В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
    • Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.

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

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

    PADDING (Отступы) - как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока.

    Пример: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат:

    Т.е. значения записываются по часовой стрелке: верхнее, правое, нижнее, левое.

    В каких случаях лучше пользоваться отступами, а в каких полями?

    Несколько принципиальных отличий:

      Отступы(padding) распологаются внутри блока, а поля(margin) - за их пределами;

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

    14. Высота(height) и ширина(width) блоков

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

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

    HEIGHT – свойство, устанавливающее высоту блока;

    WIDTH – свойство, устанавливающее ширину блока;

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

    Создадим 4 класса, и поочередно присвоим их одному и тому же боксу (в данном случае DIV ) с текстом.

    Теперь фиксированная высота, а ширина растягивается по содержимому.

    .box3 { width: 300px; height: 600px; border: 1px solid red; background: #FFE446; }

    Здесь фиксированная как высота, так и ширина.

    .box4 { width: 300px; height: 300px; border: 1px solid red; background: #FFE446; }

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

    Примечание!

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

    Эта инструкция позволит вам лучше понимать такие свойства CSS, как border, padding и margin. Эти свойства очень помагают разработчикам позиционировать элементы на странице в соответствии с макетом.

    Давайте создадим div и присвоим ему свойства margin, padding и border.

    Свойство Padding

    CSS свойство padding определяет расстояние между границей элемента и его содержимым. Вы можете определить его следующим образом:

    • padding-top: 10px;
    • padding-right: 10px;
    • padding-bottom: 10px;
    • padding-left: 10px;

    Эту запись можно сократить:

    • padding:25px 50px 75px 100px;
      • сверху 25px
      • справа 50px
      • снизу 75px
      • слева 100px
    • padding:25px 50px 75px;
      • сверху 25px
      • справа и слева 50px
      • снизу 75px
    • padding:25px 50px;
      • сверху и снизу 25px
      • справа и слева 50px
    • padding:25px;
      • все 25px

    Внимание: значение padding добавляется к ширине элемента и зависит от фона элемента.

    Иначе говоря у нас есть элемент div с классом div-1:

    Div.div-1{ width:150px; padding: 25px;}

    Браузер добавит к ширине элемента левый и правый padding. В результате мы получим элемент шириной 200px.

    Свойство Border

    CSS свойство border позволяет вам определять стиль и цвет границы элемента.

    border-width

    Свойство border-width применяется для определения ширины границы. Ширина задается в пикселях или с помощью одного из предопределенных значений: thin (тонкая), medium (средняя) или thick (толстая).

    border-color

    Свойство border-color применяется для определения цвета границы. Цвет может быть задан следующими способами:

    • название — название цвета, например, «red»
    • RGB — определяет RGB значение, например, «rgb(255,0,0)»
    • Hex — определяет hex значение, например, «#ff0000»

    border-style

    • dotted : Определяет точетную границу
    • dashed : Определяет пунктирную границу
    • solid : Определяет толстую границу
    • double : Определяет две границы. Расстояние между ними зависит от значения border-width
    • groove : Определяет объемную вдавленную границу
    • ridge : Определяет объемную выпуклую границу
    • inset : Определяет границу так, что блок качется вдавленным
    • outset : Определяет границу так, что блок качется выпуклым

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

    Div.div-2{ border:1px solid #ccc; }

    Свойство Margin

    CSS свойство margin определяет расстояние вокруг элемента. Margin освобождает расстояние вокруг элемента (снаружи от border). Margin не имеет цвета фона и всегда остается прозрачным.

    Вы можете определить значения margin для элемента следующим образом:

    • margin-top:100px;
    • margin-bottom:100px;
    • margin-right:50px;
    • margin-left:50px;

    Эту запись можно сократить:

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

    Используя значения margin по умолчанию вы можете расположить блок по центру грризонтально.

    21.11.16 2K

    Сегодня мы поработаем над пониманием разницы между HTML padding (внутренний отступ ) и margin (внешний отступ ) в CSS . Но сначала разберемся с их синтаксисом. Существует несколько способов написания этих свойств: обычный и сокращенный:

    Padding и Margin в CSS

    Обычную форму записи рассматриваемых свойств проще понять, потому что она похожа на все остальные стилевые записи:

    Обычная запись:

    padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;

    С другой стороны, сокращенная запись в CSS объединяет в себе все эти свойства в одно общее свойство «padding «.

    Краткая запись:

    padding: 10px 20px 40px 10px;

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

    padding: TOP RIGHT BOTTOM LEFT; (padding: сверху справа снизу слева)

    Эту запись можно сократить запись до трех значений, если левый и правый padding/margin одинаковы. Например, если верхний отступ равен 30px , левый и правый по 10px , а нижний — 40px , то можно использовать следующую форму записи:

    padding: 30px 10px 40px;

    Сокращаем до двух значений!

    Если верхний и нижний padding/margin одинаковы, а правый и левый padding/margin тоже одинаковы, то можно указывать только два значения. В этом примере у нас есть верхний и нижний отступы, которые равны 10px , а левый и правый отступы — по 20px . Наш CSS будет выглядеть следующим образом:

    padding: TOP/BOTTOM RIGHT/LEFT; (padding: сверху/снизу справа/слева) padding: 10px 20px;

    Только одно значение!

    Наша последняя версия сокращенной записи для padding и margin HTML содержит только одно значение. Эту запись можно использовать, когда все отступы (сверху, снизу, справа и слева ) имеют одно и то же значение. Если бы мы хотели, чтобы все стороны имели отступы по 20px , то CSS выглядел бы следующим образом:

    Когда какой формат записи использовать? Например, если нужно задать элементу только нижний отступ, я буду использовать обычную запись, так как нужно применить свойство только к одной стороне: padding-bottom: 30px ;

    Как работать с PADDING и MARGIN

    Между этими двумя свойствами существует ощутимая разница. Padding используется для задания пространства внутри контейнера HTML-элемента . Margin используется для задания пространства вокруг внешней границы элементов.

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

    Также можно думать о padding как о наполнителе в картонной коробке. Когда вы наполняете коробку пенопластом, вы удерживайте им содержимое на расстоянии от краев коробки. Padding в CSS делает то же самое.

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

    PADDING и MARGIN на примере сайта

    Рассмотрим свойства на примерах с элементами. Мы начнем с абзаца (тега

    ), затем добавим к нему цвет фона и добавим отступ 30px с каждой стороны.

    Ниже слева видно, что это абзац с padding 30px вокруг него. На изображении справа я использовал инструменты Google Chrome , чтобы показать, где padding HTML начинается /заканчивается для этого элемента. Зеленый цвет на изображении ниже – это padding , который расположен вокруг контейнера. Темно-синий цвет фона заполняет внутреннюю область:

    Теперь добавим margin абзацу. Я добавлю отступ сверху и снизу 30px , а также 20px слева и справа. Ниже на изображении слева показано, как этот абзац изменился с margin . Фактическая ширина изображения стала меньше, потому что margin отталкивает от границ другой HTML элемент . Справа видно, что оранжевый цвет – это margin вокруг элемента. margin всегда находится за пределами padding и темно-синий фон не распространяется на область margin .



    © Copyright 2024, https://qzoreteam.ru