НТВ плюс 

Что значит padding. Поля и отступы CSS: отличия свойств margin и padding

Эта инструкция позволит вам лучше понимать такие свойства 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 по умолчанию вы можете расположить блок по центру грризонтально.

Статьи iT заметки HTML&CSS Запомним навсегда: чем отличаются margin и padding
Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding , а что margin , и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.
Задача : на странице нужен блок красного цвета (200х200 пикселей), который отступает от краёв браузера сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху на 40 пикселей.
Решение : смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через margin. Если мы делаем padding, то отступ происходит внутри нашего красного блока и отступы получаются с фоном самого блока (то есть красные).

200?"200px":""+(this.scrollHeight+5)+"px");">


текст, текст, много текста, много - много текста текста


Помимо использованных свойств (строки 6-9) есть ещё свойства margin-right, padding-right, margin-bottom, padding-bottom - они для отступов справа и снизу соответственно. Значения всех этих свойств могут быть в пикселях (px), процентах (%), либо в единицах em.
В принципе вот оно и всё. Однако есть ещё некоторые особенности работы с ними.

Особенности margin и padding

  • Если у блоков имеется CSS-свойство float, то необходимо прописать блокам display:inline, чтобы не было двойных отступов слева и справа (подробнее в статье Как подружить Internet Explorer 6 и CSS-свойство margin?)
  • При использовании padding, размеры padding"а должны вычитаться из высоты и ширины блока, в противном случае размер блока увеличится на размер padding"а.
  • Если какому-то блоку задать margin-left и margin-right со значениями auto, то если у блока имеется фиксированная ширина (например 400px) и нет CSS-свойста float, то этот блок будет выровнен по центру элемента, в котором он находится. Собственно для нерезиновой вёрстки с выравниванием по центру этот способ выравнивания обычно и используется. Несмотря на то, что IE 5.5 и младше значение auto не поддерживают, это всё равно не мешает его всё время использовать=).
  • Нежелательно использование padding и margin в таблицах, потому что эффект будет непредсказуемым в различных браузерах.
    И последнее, что я хотел сказать. Не забывайте использовать сокращённые конструкции записи, например margin: 10px 0 5px 20px;. Если отступ нулевой, то ставить можно просто нолик, без указания параметров. Запомнить какой из параметров к какой границе относится очень просто - для блока отступы идут по часовой стрелке: первое число - сверху, второе - справа, третье - снизу, четвёртое - слева.
    Вот собственно и всё, что я хотел рассказать сегодня. Всем счастливых выходных!
    +

    В этой теме Вы можете задать вопрос о материале.

    • Давайте посмотрим, в чем отличие 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; }

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

    Примечание!

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

    Источник: 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 больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.