Padding, Margin и Border — задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right). Как установить CSS margin и padding (и крутые советы по раскладке) Css когда использовать margin padding
Свойство CSS padding отвечает за задание отступов внутри элемента от его границы
Синтаксис CSS padding
padding : top right bottom left ;
- top - отступ от верхней границы элемента;
- right - отступ от правой границы элемента;
- bottom - отступ от нижней границы элемента;
- left - отступ от левой границы элемента;
Значения чаще всего задаются в пикселях. Допускается также задание в виде процентов и других допустимых единицах CSS.
Примечание 1
Допускается задание не четырех значений. В зависимости от количества значений действия будут разные:
- Если задано 3 значения, то первое значение устанавливает отступ сверху, второе - одновременно слева и справа, а третье - снизу
- Если задано 2 значения, то первое значение устанавливает отступ сверху и снизу, второе - слева и справа от содержимого
- Если задано 1 значение, то отступ задается одинаковый отступ для всех сторон. Например:
padding : 10px 10px 10px 10px ; Можно задать компактнее: padding : 10px ;
Примечание 2
В отличии от свойства CSS margin , отрицательные значения у padding не допустимы.
Также у padding есть 4 отдельных свойства CSS. Каждое из них отвечает за какое-то направление.
- padding-left - отступ от левой границы элемента;
- padding-right - отступ от правой границы элемента;
- padding-top - отступ от верхней границы элемента;
- padding-bottom - отступ от левой границы элемента;
Например
padding : 3px 5px 7px 10px ; Или можно задать подробно: padding-left : 10px ; padding-right : 5px ; padding-top : 3px ; padding-bottom : 7px ;
Примеры с разными отступами внутри элемента
Пример 1. Отступ текста внутри тега
Пример с нулевыми отступам (padding: 0px)
Пример с одинаковым отступом от всех границ (padding: 10px)
Пример с разными отступам (padding: 10px 0px 0px 30px)
Вот как это выглядит на странице:
Пример с нулевыми отступам (padding: 0px)
Пример с одинаковым отступом от всех границ (padding: 10px)
Пример с разными отступам (padding: 10px 0px 0px 30px)
Пример 2. Отступ объекта внутри объекта
Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding
, а что margin
, и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.
Задача
: на странице нужен блок красного цвета
(200х200 пикселей), который отступает от краёв браузера
сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху
на 40 пикселей.
Решение
: смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через margin. Если мы делаем padding, то отступ происходит внутри нашего красного блока и отступы получаются с фоном самого блока (то есть красные).
текст, текст, много текста, много - много текста текста
Помимо использованных свойств (строки 6-9) есть ещё свойства margin-right, padding-right, margin-bottom, padding-bottom - они для отступов справа и снизу соответственно. Значения всех этих свойств могут быть в пикселях (px), процентах (%), либо в единицах em.
В принципе вот оно и всё. Однако есть ещё некоторые особенности работы с ними.
Особенности margin и padding
При использовании padding, размеры padding"а должны вычитаться из высоты и ширины блока, в противном случае размер блока увеличится на размер padding"а.
Если какому-то блоку задать margin-left и margin-right со значениями auto, то если у блока имеется фиксированная ширина (например 400px) и нет CSS-свойста float, то этот блок будет выровнен по центру элемента, в котором он находится. Собственно для нерезиновой вёрстки с выравниванием по центру этот способ выравнивания обычно и используется. Несмотря на то, что IE 5.5 и младше значение auto не поддерживают, это всё равно не мешает его всё время использовать=).
Нежелательно использование padding и margin в таблицах, потому что эффект будет непредсказуемым в различных браузерах.
И последнее, что я хотел сказать. Не забывайте использовать сокращённые конструкции записи, например margin: 10px 0 5px 20px;. Если отступ нулевой, то ставить можно просто нолик, без указания параметров. Запомнить какой из параметров к какой границе относится очень просто - для блока отступы идут по часовой стрелке: первое число - сверху, второе - справа, третье - снизу, четвёртое - слева.
Вот собственно и всё, что я хотел рассказать сегодня. Всем счастливых выходных!
От автора:
когда я только начал изучать CSS, я все время путался в margin и padding. Они казались очень похожими, а в некоторых случаях давали одинаковый результат. В этом уроке вы увидите разницу между CSS margin и padding, а также узнаете, как эти свойства влияют на пространство между элементами на странице. Также мы обсудим схлопывание margin’ов, использование разных единиц измерения при создании адаптивных сайтов. Завершим статью мы парочкой советов по раскладке с использованием margin и padding.
Блочная модель
Элементы в CSS представляются в виде прямоугольных блоков. Размер прямоугольного блока определяется свойствами элемента: контент, padding, рамка, margin.
Область контента элемента расположена в середине. Далее padding окружает область контента. Рамка окружает padding, а margin – это внешний слой, т.е. он находится вне элемента. Чтобы лучше понять, о чем идет речь, ниже показана диаграмма.
Как видно из диаграммы, padding – это слой, расширяющий элемент от внешней грани области контента до внутренней грани рамки. С помощью этого свойства контролируется расстояние между рамкой элемента и его контентом. Padding влияет на размер элемента на странице, однако он никак не влияет на расстояние между элементами на странице.
Если нужно увеличить или уменьшить расстояние между элементами, используйте margin. Свойство margin никак не влияет на размеры элемента.
Важно помнить, что размеры всех блоков на веб-странице зависят от используемой блоковой модели. Существует две блочных модели: блочная модель W3C, традиционная блочная модель.
По блоковой модели W3C ширина элемента вычисляется из контента блока без учета padding и margin. Padding и рамка добавляются поверх заданных размеров, что может привести к непредсказуемым последствиям для макета страницы.
Например, давайте возьмем блок с шириной 200px и высотой 200px, padding 10px по всем сторонам и рамкой 2px по всем сторонам. Браузер не видит блок 200px. Браузер вычисляет горизонтальное пространство, необходимое для отображения блока, и оно равно 224px: 200 (ширина)+2(левая рамка)+10(левый padding)+10(правый padding)+2(правая рамка)=224px. Так как это квадрат, то высота тоже будет равна 224px.
С другой стороны, традиционная блоковая модель за ширину принимает сумму контента, padding’ов и рамки. Это значит, что если ваш блок имеет ширину 200px, то браузер вычислит горизонтальное пространство, необходимое для его отображения, и оно будет равно 200px, включая padding и рамку. Результат более предсказуем, и с ним легче работать.
По умолчанию все браузеры используют блоковую модель W3C. Модель можно задать вручную с помощью свойства box-sizing. Принимаются два значения content-box (W3C) и border-box (традиционная модель). Традиционная модель интуитивно понятнее, что сделало ее самой популярной среди веб-разработчиков.
Ниже показано, как с помощью box-sizing использовать традиционную модель в своем проекте:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html
{
box
-
sizing
:
border
-
box
;
*
,
*
:
before
,
*
:
after
{
box
-
sizing
:
inherit
;
Если вы быстрее запоминаете, когда делаете что-то сами, то попробуйте поэкспериментировать с забавным интерактивным демо от Guy Routledge.
Установка margin и padding
С помощью свойств padding-top, padding-right, padding-bottom и padding-left можно управлять внутренним отступом по всем четырем сторонам элемента. Также padding можно задавать через сокращенное свойство. Если записано одно значение padding, CSS использует его для определения отступа для всех 4 сторон:
/* все 4 стороны */
padding: 10px;
Если представлено 3 значения, первое отвечает за верх, второе за лево и право, а третье за низ:
/* верх | горизонталь | низ */
padding: 1em 20px 2em;
Если представлены все 4 значения, то каждое отвечает за верх, право, низ и лево соответственно:
/* верх | право | низ | лево */
padding: 10px 10% 2em 15%;
В демо ниже оранжевый фон – это область контента для разных элементов, белая область между рамкой и контентом – padding:
Внешний отступ можно, как и padding, контролировать по всем 4 сторонам с помощью свойств margin-top, margin-right, margin-bottom и margin-left. Также margin можно задать для всех 4 сторон разом с помощью сокращенного свойства.
/* все 4 стороны */
margin: 10px;
/* вертикаль | горизонталь */
margin: 2em 4em;
/* верх | горизонталь | низ */
margin: 2em auto 2em;
/* верх | право | низ | лево */
margin: 10px 10% 2em 15%;
Что нужно помнить
Используйте правильные единицы измерения
При работе с padding и margin избегайте абсолютных единиц измерения. Такие единицы не адаптируются под изменения размеров шрифта и ширины экрана.
Скажем, вы задали ширину элемента на 50% и margin 15px. На ширине 1200px ширина элемента будет составлять 600px, а margin так и будет 15px. На ширине 769px ширина элемента будет равна 384px, а margin все еще будет 15px.
Ширина элемента изменилась на 36%, а его margin остался прежним. В большинстве случаев это не самая большая проблема. Однако если задать margin элемента в процентах, то вы будете лучше контролировать макет страницы на всех экранах. Все будет выглядеть пропорционально без резких прыжков в значениях примененных margin и padding.
Точно так же, возможно, вы захотите добавить padding к текстовым элементам на странице. В большинстве случаев хочется, чтобы padding был пропорционален размеру шрифта на элементе. На абсолютных единицах сделать это невозможно. Однако если задать padding в em, то он будет автоматически подстраиваться под размер шрифта. Демо ниже демонстрирует масштабирование в действии.
Как браузеры вычисляют margin и padding для разных единиц измерения
Браузеры по-разному вычисляют конечные значения margin и padding в зависимости от единиц измерения.
Margin и padding, заданные в процентах, вычисляются относительно ширины контейнера. То есть padding 5% будет равен 5px, если ширина контейнера составляет 100px, или 50px, если ширина контейнера равна 1000px. Не забывайте, что верхнее и нижнее значения вычисляются также по ширине контейнера.
В случае с em значение margin и padding основывается на размере шрифта данного элемента. В предыдущем демо padding на трех нижних текстовых элементах равен 1em. Из-за разного размера шрифта вычисленное значение padding будет всегда разным.
Также существует 4 вьюпорт единицы измерения vw, vh, vmin и vmax. В этом случае значения margin и padding будут зависеть от вьюпорта. Например, padding 5vw будет равен 25px при ширине вьюпорта 500px, а padding 10vw будет равен 50px на том же вьюпорте. Более подробно изучить данные единицы измерения можно в статье на сайте SitePoint «CSS вьюпорт единицы измерения: быстрый старт ».
Если вы новичок, знание принципов работы этих единиц поможет вам быстро понять, почему padding и margin на HTML-элементах меняются в зависимости от размеров родителя, шрифта или даже вьюпорта. А это даст вам способность контролировать ваш макет.
Схлопывание margin’ов
Также вам нужно знать про концепцию схлопывания margin’ов. В определенных ситуациях верхний и нижний margin’ы на двух элементах могут схлопываться в один. Данный феномен называется схлопывание margin’ов.
Скажем, у вас есть два элемента один под другим, т.е. на одном уровне. Если на первом элементе задать margin-bottom 40px, а на втором margin-top 25px, то общий margin между элементами не будет равен 65px. Отступ будет равен значению большего margin’а, т.е. 40px.
Точно так же margin может схлопываться между родителем и первым или последним дочерним элементом. Это происходит, если нет рамки, padding’а или инлайнового контента, отделяющего дочерний и родительский margin’ы. В таком случае если на родителе нет padding’а или рамки, margin дочернего элемента будет «вытекать» из родителя.
Можно исправить такое поведение. Для этого необходимо добавить барьер между родительским margin и дочерним. В демо ниже показано, как добавление рамки или padding’а на родительский элемент позволяет исправить проблему.
В случае с отрицательными margin’ами конечное значение схлопнувшегося margin’а равно сумме положительного margin’а с самым маленьким отрицательным. Более подробно тему схлопывания margin’ов можно изучить в статье «схлопывание margin’ов » от Adam Roberts.
Интересные способы применения margin и padding
Иногда с помощью margin и padding можно решить проблемы с макетом. Ниже описано несколько примеров:
Сохранение соотношения сторон в изображениях
Зачастую у изображений на странице разное соотношение сторон. Если вам нужно показать все изображения с одинаковым соотношением сторон, вам поможет CSS padding.
Для этого нужно задать height родителя в ноль, а свойство padding-top родителя должно быть равно значению соотношения сторон, выраженному в процентах.
Например, соотношение сторон 16:9 достигается путем padding: 56.25% 0 0 0. Значение 56.25 получено путем (9/16)*100. С помощью этого метода можно вычислять проценты padding’а для любого другого соотношения сторон.
Заключение
Если вы только начали изучать CSS, надеюсь, этот урок помог вам понять разницу между margin и padding. Вам нужно научиться задавать margin и padding через сокращения и подходящие единицы измерения. В последней секции я показал два интересных способа применения свойств в макетах, а также дал вам ссылки на ресурсы для дальнейшего обучения. Если у вас есть другие советы по CSS margin и padding, пишите их в комментариях.
Описание
Устанавливает значение полей вокруг содержимого элемента. Полем называется
расстояние от внутреннего края рамки элемента до воображаемого прямоугольника,
ограничивающего его содержимое (рис. 1).
Свойство padding
позволяет задать величину поля
сразу для всех сторон элемента или определить ее только для указанных сторон.
Синтаксис
padding: [значение | проценты] {1, 4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между
собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых
для CSS единицах. Значение inherit
указывает, что оно наследуется у родителя.
При указании поля в процентах, значение считается от ширины родителя элемента.
HTML5
CSS2.1
IE
Cr
Op
Sa
Fx
padding
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства padding
Объектная модель
document.getElementById("elementID
").style.padding
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit
.
Сразу определю - это очень важный урок. После его изучения Вы сможете располагать элементы на странице, задавать между ними отступы, создавать их внутри отдельного конкретного блока, задавать поля.
padding
Padding - это свойство, которое служит для установления количества полей у элемента от внутреннего края границы до содержимого. Содержимым может быть обычный текст, изображение или дочерний элемент, который так же может иметь свои поля.
Единицами измерения могут быть пиксели (px) или процентное соотношение (%).
#block {
padding: 12px; /* отступ от границ блока до содержания - со всех сторон будет 12 пикселей */
}
Есть возможность указать поле только с одной определённой стороны:
padding-top
- свойство, создающие поля сверху.
padding-right
- свойство, создающие поля справа.
padding-bottom
- свойство, создающие поля снизу.
padding-left
- свойство, создающие поля слева.
#block {
padding-bottom: 25px; /* снизу поле 25 пикселей */
padding-left: 15px; /* слева поле 15 пикселей */
}
Как Вы заметили, если указывать таким образом поля с 2-х или 3-х сторон, то получится длинный код. Для этого существует сокращённая запись свойства padding. В ней поочерёдно указывается все 4 значения - от каждого края в одну строчку, движение идет по часовой строке, начиная с верхнего:
Padding: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;
#block {
padding: 25px 10px 15px 6px; /* сверху 25px, справа 10px, снизу 15px, слева 6px */
}
margin
Свойство margin, в отличии от padding, устанавливает величину отступа между границами элементами.
Если элемент является дочерним, то отступом является пространство от границы элемента до внутреннего края границы родителя.
Если у элемента отсутствует родитель, то отступом считается установленное свойством свободное пространство до краев рамки окружающих элементов.
#block {
margin: 4px;
}
Для указания отступов лишь с определенных сторон существуют следующие свойства:
margin-top
- свойство, создающие отступы сверху.
margin-right
- свойство, создающие отступы справа.
margin-bottom
- свойство, создающие отступы снизу.
margin-left
- свойство, создающие отступы слева.
Как и у свойства padding, у margin тоже имеется возможность сокращенной записи значений для разных сторон. Движение идет по часовой стрелке, с верхнего поля:
Margin: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;
#block {
margin: 15px 10px 5px 25px; /* сверху 15px, справа 10px, снизу 5px, слева 25px */
}
Спасибо за внимание!
Пример с нулевыми отступам (padding: 0px)Пример с одинаковым отступом от всех границ (padding: 10px)Пример с разными отступам (padding: 10px 0px 0px 30px)
Вот как это выглядит на странице:
Пример с нулевыми отступам (padding: 0px)
Пример с одинаковым отступом от всех границ (padding: 10px)
Пример с разными отступам (padding: 10px 0px 0px 30px)
Пример 2. Отступ объекта внутри объекта
Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding , а что margin , и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.
Задача : на странице нужен блок красного цвета (200х200 пикселей), который отступает от краёв браузера сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху на 40 пикселей.
Решение : смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через margin. Если мы делаем padding, то отступ происходит внутри нашего красного блока и отступы получаются с фоном самого блока (то есть красные).
текст, текст, много текста, много - много текста текста
Помимо использованных свойств (строки 6-9) есть ещё свойства margin-right, padding-right, margin-bottom, padding-bottom - они для отступов справа и снизу соответственно. Значения всех этих свойств могут быть в пикселях (px), процентах (%), либо в единицах em.
В принципе вот оно и всё. Однако есть ещё некоторые особенности работы с ними.
Особенности margin и padding
При использовании padding, размеры padding"а должны вычитаться из высоты и ширины блока, в противном случае размер блока увеличится на размер padding"а.
Если какому-то блоку задать margin-left и margin-right со значениями auto, то если у блока имеется фиксированная ширина (например 400px) и нет CSS-свойста float, то этот блок будет выровнен по центру элемента, в котором он находится. Собственно для нерезиновой вёрстки с выравниванием по центру этот способ выравнивания обычно и используется. Несмотря на то, что IE 5.5 и младше значение auto не поддерживают, это всё равно не мешает его всё время использовать=).
Нежелательно использование padding и margin в таблицах, потому что эффект будет непредсказуемым в различных браузерах.
И последнее, что я хотел сказать. Не забывайте использовать сокращённые конструкции записи, например margin: 10px 0 5px 20px;. Если отступ нулевой, то ставить можно просто нолик, без указания параметров. Запомнить какой из параметров к какой границе относится очень просто - для блока отступы идут по часовой стрелке: первое число - сверху, второе - справа, третье - снизу, четвёртое - слева.
Вот собственно и всё, что я хотел рассказать сегодня. Всем счастливых выходных!
От автора: когда я только начал изучать CSS, я все время путался в margin и padding. Они казались очень похожими, а в некоторых случаях давали одинаковый результат. В этом уроке вы увидите разницу между CSS margin и padding, а также узнаете, как эти свойства влияют на пространство между элементами на странице. Также мы обсудим схлопывание margin’ов, использование разных единиц измерения при создании адаптивных сайтов. Завершим статью мы парочкой советов по раскладке с использованием margin и padding.
Блочная модель
Элементы в CSS представляются в виде прямоугольных блоков. Размер прямоугольного блока определяется свойствами элемента: контент, padding, рамка, margin.
Область контента элемента расположена в середине. Далее padding окружает область контента. Рамка окружает padding, а margin – это внешний слой, т.е. он находится вне элемента. Чтобы лучше понять, о чем идет речь, ниже показана диаграмма.
Как видно из диаграммы, padding – это слой, расширяющий элемент от внешней грани области контента до внутренней грани рамки. С помощью этого свойства контролируется расстояние между рамкой элемента и его контентом. Padding влияет на размер элемента на странице, однако он никак не влияет на расстояние между элементами на странице.
Если нужно увеличить или уменьшить расстояние между элементами, используйте margin. Свойство margin никак не влияет на размеры элемента.
Важно помнить, что размеры всех блоков на веб-странице зависят от используемой блоковой модели. Существует две блочных модели: блочная модель W3C, традиционная блочная модель.
По блоковой модели W3C ширина элемента вычисляется из контента блока без учета padding и margin. Padding и рамка добавляются поверх заданных размеров, что может привести к непредсказуемым последствиям для макета страницы.
Например, давайте возьмем блок с шириной 200px и высотой 200px, padding 10px по всем сторонам и рамкой 2px по всем сторонам. Браузер не видит блок 200px. Браузер вычисляет горизонтальное пространство, необходимое для отображения блока, и оно равно 224px: 200 (ширина)+2(левая рамка)+10(левый padding)+10(правый padding)+2(правая рамка)=224px. Так как это квадрат, то высота тоже будет равна 224px.
С другой стороны, традиционная блоковая модель за ширину принимает сумму контента, padding’ов и рамки. Это значит, что если ваш блок имеет ширину 200px, то браузер вычислит горизонтальное пространство, необходимое для его отображения, и оно будет равно 200px, включая padding и рамку. Результат более предсказуем, и с ним легче работать.
По умолчанию все браузеры используют блоковую модель W3C. Модель можно задать вручную с помощью свойства box-sizing. Принимаются два значения content-box (W3C) и border-box (традиционная модель). Традиционная модель интуитивно понятнее, что сделало ее самой популярной среди веб-разработчиков.
Ниже показано, как с помощью box-sizing использовать традиционную модель в своем проекте:
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
html { box - sizing : border - box ; * , * : before , * : after { box - sizing : inherit ; |
Если вы быстрее запоминаете, когда делаете что-то сами, то попробуйте поэкспериментировать с забавным интерактивным демо от Guy Routledge.
Установка margin и padding
С помощью свойств padding-top, padding-right, padding-bottom и padding-left можно управлять внутренним отступом по всем четырем сторонам элемента. Также padding можно задавать через сокращенное свойство. Если записано одно значение padding, CSS использует его для определения отступа для всех 4 сторон:
/* все 4 стороны */ padding: 10px;
Если представлено 3 значения, первое отвечает за верх, второе за лево и право, а третье за низ:
/* верх | горизонталь | низ */ padding: 1em 20px 2em;
Если представлены все 4 значения, то каждое отвечает за верх, право, низ и лево соответственно:
/* верх | право | низ | лево */ padding: 10px 10% 2em 15%;
В демо ниже оранжевый фон – это область контента для разных элементов, белая область между рамкой и контентом – padding:
Внешний отступ можно, как и padding, контролировать по всем 4 сторонам с помощью свойств margin-top, margin-right, margin-bottom и margin-left. Также margin можно задать для всех 4 сторон разом с помощью сокращенного свойства.
/* все 4 стороны */ margin: 10px; /* вертикаль | горизонталь */ margin: 2em 4em; /* верх | горизонталь | низ */ margin: 2em auto 2em; /* верх | право | низ | лево */ margin: 10px 10% 2em 15%;
Что нужно помнить
Используйте правильные единицы измерения
При работе с padding и margin избегайте абсолютных единиц измерения. Такие единицы не адаптируются под изменения размеров шрифта и ширины экрана.
Скажем, вы задали ширину элемента на 50% и margin 15px. На ширине 1200px ширина элемента будет составлять 600px, а margin так и будет 15px. На ширине 769px ширина элемента будет равна 384px, а margin все еще будет 15px.
Ширина элемента изменилась на 36%, а его margin остался прежним. В большинстве случаев это не самая большая проблема. Однако если задать margin элемента в процентах, то вы будете лучше контролировать макет страницы на всех экранах. Все будет выглядеть пропорционально без резких прыжков в значениях примененных margin и padding.
Точно так же, возможно, вы захотите добавить padding к текстовым элементам на странице. В большинстве случаев хочется, чтобы padding был пропорционален размеру шрифта на элементе. На абсолютных единицах сделать это невозможно. Однако если задать padding в em, то он будет автоматически подстраиваться под размер шрифта. Демо ниже демонстрирует масштабирование в действии.
Как браузеры вычисляют margin и padding для разных единиц измерения
Браузеры по-разному вычисляют конечные значения margin и padding в зависимости от единиц измерения.
Margin и padding, заданные в процентах, вычисляются относительно ширины контейнера. То есть padding 5% будет равен 5px, если ширина контейнера составляет 100px, или 50px, если ширина контейнера равна 1000px. Не забывайте, что верхнее и нижнее значения вычисляются также по ширине контейнера.
В случае с em значение margin и padding основывается на размере шрифта данного элемента. В предыдущем демо padding на трех нижних текстовых элементах равен 1em. Из-за разного размера шрифта вычисленное значение padding будет всегда разным.
Также существует 4 вьюпорт единицы измерения vw, vh, vmin и vmax. В этом случае значения margin и padding будут зависеть от вьюпорта. Например, padding 5vw будет равен 25px при ширине вьюпорта 500px, а padding 10vw будет равен 50px на том же вьюпорте. Более подробно изучить данные единицы измерения можно в статье на сайте SitePoint «CSS вьюпорт единицы измерения: быстрый старт ».
Если вы новичок, знание принципов работы этих единиц поможет вам быстро понять, почему padding и margin на HTML-элементах меняются в зависимости от размеров родителя, шрифта или даже вьюпорта. А это даст вам способность контролировать ваш макет.
Схлопывание margin’ов
Также вам нужно знать про концепцию схлопывания margin’ов. В определенных ситуациях верхний и нижний margin’ы на двух элементах могут схлопываться в один. Данный феномен называется схлопывание margin’ов.
Скажем, у вас есть два элемента один под другим, т.е. на одном уровне. Если на первом элементе задать margin-bottom 40px, а на втором margin-top 25px, то общий margin между элементами не будет равен 65px. Отступ будет равен значению большего margin’а, т.е. 40px.
Точно так же margin может схлопываться между родителем и первым или последним дочерним элементом. Это происходит, если нет рамки, padding’а или инлайнового контента, отделяющего дочерний и родительский margin’ы. В таком случае если на родителе нет padding’а или рамки, margin дочернего элемента будет «вытекать» из родителя.
Можно исправить такое поведение. Для этого необходимо добавить барьер между родительским margin и дочерним. В демо ниже показано, как добавление рамки или padding’а на родительский элемент позволяет исправить проблему.
В случае с отрицательными margin’ами конечное значение схлопнувшегося margin’а равно сумме положительного margin’а с самым маленьким отрицательным. Более подробно тему схлопывания margin’ов можно изучить в статье «схлопывание margin’ов » от Adam Roberts.
Интересные способы применения margin и padding
Иногда с помощью margin и padding можно решить проблемы с макетом. Ниже описано несколько примеров:
Сохранение соотношения сторон в изображениях
Зачастую у изображений на странице разное соотношение сторон. Если вам нужно показать все изображения с одинаковым соотношением сторон, вам поможет CSS padding.
Для этого нужно задать height родителя в ноль, а свойство padding-top родителя должно быть равно значению соотношения сторон, выраженному в процентах.
Например, соотношение сторон 16:9 достигается путем padding: 56.25% 0 0 0. Значение 56.25 получено путем (9/16)*100. С помощью этого метода можно вычислять проценты padding’а для любого другого соотношения сторон.
Заключение
Если вы только начали изучать CSS, надеюсь, этот урок помог вам понять разницу между margin и padding. Вам нужно научиться задавать margin и padding через сокращения и подходящие единицы измерения. В последней секции я показал два интересных способа применения свойств в макетах, а также дал вам ссылки на ресурсы для дальнейшего обучения. Если у вас есть другие советы по CSS margin и padding, пишите их в комментариях.
Описание
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.
Синтаксис
padding: [значение | проценты] {1, 4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства padding
Объектная модель
document.getElementById("elementID ").style.padding
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Сразу определю - это очень важный урок. После его изучения Вы сможете располагать элементы на странице, задавать между ними отступы, создавать их внутри отдельного конкретного блока, задавать поля.
padding
Padding - это свойство, которое служит для установления количества полей у элемента от внутреннего края границы до содержимого. Содержимым может быть обычный текст, изображение или дочерний элемент, который так же может иметь свои поля.
Единицами измерения могут быть пиксели (px) или процентное соотношение (%).
#block {
padding: 12px; /* отступ от границ блока до содержания - со всех сторон будет 12 пикселей */
}
Есть возможность указать поле только с одной определённой стороны:
padding-top
- свойство, создающие поля сверху.
padding-right
- свойство, создающие поля справа.
padding-bottom
- свойство, создающие поля снизу.
padding-left
- свойство, создающие поля слева.
#block {
padding-bottom: 25px; /* снизу поле 25 пикселей */
padding-left: 15px; /* слева поле 15 пикселей */
}
Как Вы заметили, если указывать таким образом поля с 2-х или 3-х сторон, то получится длинный код. Для этого существует сокращённая запись свойства padding. В ней поочерёдно указывается все 4 значения - от каждого края в одну строчку, движение идет по часовой строке, начиная с верхнего:
Padding: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;
#block {
padding: 25px 10px 15px 6px; /* сверху 25px, справа 10px, снизу 15px, слева 6px */
}
margin
Свойство margin, в отличии от padding, устанавливает величину отступа между границами элементами.
Если элемент является дочерним, то отступом является пространство от границы элемента до внутреннего края границы родителя.
Если у элемента отсутствует родитель, то отступом считается установленное свойством свободное пространство до краев рамки окружающих элементов.
#block {
margin: 4px;
}
Для указания отступов лишь с определенных сторон существуют следующие свойства:
margin-top
- свойство, создающие отступы сверху.
margin-right
- свойство, создающие отступы справа.
margin-bottom
- свойство, создающие отступы снизу.
margin-left
- свойство, создающие отступы слева.
Как и у свойства padding, у margin тоже имеется возможность сокращенной записи значений для разных сторон. Движение идет по часовой стрелке, с верхнего поля:
Margin: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;
#block {
margin: 15px 10px 5px 25px; /* сверху 15px, справа 10px, снизу 5px, слева 25px */
}
Спасибо за внимание!