что лучше использовать padding или margin
Поля и отступы CSS: отличия свойств margin и padding
В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.
Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:
Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками
Как видите, поля и отступы CSS отличаются между собой, хоть иногда без просмотра кода и нельзя определить, с помощью какого свойства задано расстояние. Это случается в тех случаях, когда отсутствует рамка или фон блока с содержимым.
Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:
Отступы:
Поля:
Также существует очень удобная вещь как сокращенная запись margin и padding CSS. Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:
Схлопывание margin
Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.
Расстояние между блоками равно большему из значений
Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному:
Изучаем свойство padding в CSS и свойство margin в CSS
Padding в CSS и Margin в CSS
Обычную форму записи рассматриваемых свойств проще понять, потому что она похожа на все остальные стилевые записи:
С другой стороны, сокращенная запись в CSS объединяет в себе все эти свойства в одно общее свойство « padding «.
У margin и padding есть четыре значения: верхнее, правое, нижнее и левое. В сокращенной записи, показанной выше, так же задаются четыре значения, отделенных друг от друга пробелом. Первое из четырех значений отступ сверху, затем отступ справа, снизу ( padding bottom HTML ) и слева:
Сокращаем до двух значений!
Только одно значение!
Совет!
Когда какой формат записи использовать? Например, если нужно задать элементу только нижний отступ, я буду использовать обычную запись, так как нужно применить свойство только к одной стороне: padding-bottom: 30px ;
Как работать с margin и padding
Представьте, что padding надевает на вас зимнее пальто. Пальто часть вас, но если бы я бросил краску в вас, она покрыла бы более широкую поверхность чем, если бы на вас не было этого пальто.
Также можно думать о padding как о наполнителе в картонной коробке. Когда вы наполняете коробку пенопластом, вы удерживайте им содержимое на расстоянии от краев коробки. Padding в CSS делает то же самое.
Теперь подумайте о margin как о невидимом силовом поле вокруг вас. Силовое поле ограждает другие вещи от вас. Возвращаясь к примеру с пальто и краской, если бы я бросил в вас краску, и она была бы в состоянии пройти через силовое поле, то она по-прежнему покрыла бы только вас и ваше пальто.
Свойства margin и padding на примере сайта
Рассмотрим свойства на примерах с элементами. Мы начнем с абзаца ( тега
), затем добавим к нему цвет фона и добавим отступ 30px с каждой стороны.
Пожалуйста, оставляйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, дизлайки, отклики, подписки!
Урок 11: Поля (margin) и отступы (padding)
Это очень простой, но в это же время и нужный урок. Давайте посмотрим, в чем отличие margin от padding. Для этого, еще разок вспомним блоковую модель в CSS.
И давайте сразу посмотрим примерчик: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат:
.p1 <
background-color : #FFE446;
border:1px solid red;
margin : 70px ;
>
.p2 <
background-color : #FFE446;
border:1px solid red;
padding : 70px ;
>
.p3 <
background-color : #FFE446;
border:1px solid red;
margin : 50px ;
padding : 20px ;
>
Ну как разобрались? если читали текст внутри примера, то точно разобрались.
p <
margin-top :50px;
margin-right :50px;
margin-bottom :50px;
margin-left :150px;
>
Тоже самое, только в более сокращенной записи:
p <
margin :50px;
margin-left :150px;
>
Т.е. так как только левое поле отличается от остальных, мы просто записали общее поле, а потом дописали значение левого поля, и получили тот же результат что и в первом примере.
Возможен также такой вариант записи:
p <
margin : 50px 50px 50px 150px;
>
Т.е. значения записываются по часовой стрелке: верхнее, правое, нижнее, левое.
В каких случаях лучше пользоваться отступами, а в каких полями?
А это уже решать Вам, могу только дать несколько принципиальных отличий:
Думаю тут нет ничего сложного, главное попрактикуйтесь, придумайте свои примеры, а уже потом можете двигаться дальше 🙂
Padding и margin
Это оставляет пространство шириной 20 пикселей вокруг вторичного заголовка, а сам заголовок жирен от заполнения шириной 40 пикселей.
Поля, отступы и границы являются частью так называемой Box Model. Боксовая модель работает следующим образом: в середине у вас есть область контента (скажем, изображение), окружающая вас, у вас есть отступы, окружающая вас, у вас есть граница, и окружающая, у вас есть поле. Это может быть визуально представлено так:
Вам не нужно все это использовать(Margins and Padding), но полезно запомнить, что блочная модель может применяться ко всем элементам вашей страницы.
Язык разметки HTML
Закругление углов CSS
Ecmascript 6
Инструкция для вступления в нашу команду
Рады видеть вас на этой странице сайта, это означает что вы хотите влиться и стать частью нашей дружной команды.
Нам требуются специалисты с опытом работы во Front-end, Back-end разработки, верстальщики, СЕО специалисты и маркетологи. Если в одном из пунктов выше вы имеете хороший опыт и способны привнести в проект свежие идеи и развить его, то смело пишите нам, мы будем рады ответить каждому.
Если вы только начали путь к построению карьеры веб разработчика, но у вас недостаточно опыта, то следующая инструкция для вас.
После этого мы будем готовы сделать вам предложение по сотрудничеству и работе в команде.
Постояноство и регулярность в изучении и в практике помогут вам на пути приобретения новой профессии.
Желаем вам удачи и будем рады видеть вас в нашей команде.
Как сделать отступ вокруг элемента, разница между margin и padding, тег br
При верстке страниц сайта элементы размещаются в определенном порядке, делаются отступы между ними, как вертикальные, так и горизонтальные. Отступы можно сделать разными способами, наиболее часто используются CSS свойства margin и padding. Какая разница между этими свойствами? Ответ будет дан ниже.
Кроме вышеназванных свойств CSS, отступы можно делать другими средствами, все зависит от выбранного позиционирования. Например, при абсолютном позиционировании можно использовать свойства top, right, bottom, left. При обычном позиционировании элементов применяются свойства margin и padding.
Свойства margin:
Свойства padding:
Как видно выше, margin и padding – это просто сокращенные названия свойств, можно сразу указать в таких свойствах все значения отступов через запятую для каждой стороны, а не писать по отдельности. Например, посмотрите на записи ниже – первая запись подробная, вторая запись сокращенная. Какую использовать, решать разработчику.
Какая разница между margin и padding? Свойство margin служит для создания внешнего отступа, то есть отступы будут делаться от элемента. А свойство padding создает внутренние отступы, то есть содержимое элемента будет удаленно от его внутренних границ на указанные значения.
Часто можно увидеть, что для вертикальных отступов используется тег br. Это является ошибкой, так как этот тег предназначен для переноса строк текста, а не для верстки страниц сайта. Вместо этого тега следует прописать стили у нужного элемента и задать свойство margin-top или margin-bottom – в результате будут сделаны нужные отступы от элемента.
В консоли браузера, можно легко наглядно увидеть, какие отступы заданы для выбранного элемента. Для этого необходимо выбрать элемент и в колонке консоли, где перечислены CSS свойства элемента, пролистать вниз, обычно там есть изображение с отступами вокруг элемента. Там можно увидеть все отступы, включая отступы, созданные свойством border.
Таким образом, важно правильно использовать CSS свойства для задания отступов вокруг элемента. Для упрощения процесса разработки можно воспользоваться специальными средствами, которые покажут существующие значения всех отступов.