Когда правильно padding, а когда margin?
Документация:
padding
margin
Сначала напомню читателям, о чём речь.
Документация:
padding
margin
Падинги (свойство padding) — это внутренние отступы от границ элемента до его содержимого. Маржины (свойство margin) — это внешние отступы от границ элемента до соседних элементов.
Когда использовать падинги
Падинги используют, когда нужно отодвинуть содержимое от границ элемента:
<style>
p {
padding-left: 9px;
padding-top: 18px;
padding-bottom: 27px;
}
</style>
<body>
<p>
How doth the little crocodile
<br>Improve his shining tail,
<br>And pour the waters of the Nile
<br>On every golden scale!
</p>
</body>How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
Падинги не изменятся при изменении размеров содержимого, вёрстка получается гибкой и адаптивной:
<style>
p {
padding-left: 9px;
padding-top: 18px;
padding-bottom: 27px;
font-size: 150%;
line-height: 150%;
}
</style>
<body>
<p>
How doth the little crocodile
<br>Improve his shining tail,
<br>And pour the waters of the Nile
<br>On every golden scale!
</p>
</body>How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
Фон элемента учитывает падинги, это удобно при вёрстке карточек:
<style>
p {
padding-left: 9px;
padding-top: 18px;
padding-bottom: 27px;
font-size: 150%;
line-height: 150%;
background-color: #f3f3f3;
}
</style>
<body>
<p>
How doth the little crocodile
<br>Improve his shining tail,
<br>And pour the waters of the Nile
<br>On every golden scale!
</p>
</body> How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
Когда использовать маржины
Маржины — это любые расстояния между элементами.
Например, отступы от заголовка до текста и между абзацами:
<style>
h2 {
margin-bottom: 35px;
}
p:not(:last-child) {
margin-bottom: 27px;
}
</style>
<body>
<h2>How doth the little crocodile</h2>
<p>
How doth the little crocodile
<br>Improve his shining tail,
<br>And pour the waters of the Nile
<br>On every golden scale!
</p>
<p>
How cheerfully he seems to grin,
<br>How neatly spread his claws,
<br>And welcome little fishes in
<br>With gently smiling jaws!
</p>
</body>How doth the little crocodile
How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
How cheerfully he seems to grin,
How neatly spread his claws,
And welcome little fishes in
With gently smiling jaws!
How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
Когда использовать всё вместе
Маржины и падинги можно и нужно комбинировать.
<style>
.card {
padding: 27px 18px 45px;
background-color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 5px;
}
h2 {
margin-bottom: 35px;
}
p:not(:last-child) {
margin-bottom: 27px;
}
</style>
<body>
<div>
<h2>How doth the little crocodile</h2>
<p>
How doth the little crocodile
<br>Improve his shining tail,
<br>And pour the waters of the Nile
<br>On every golden scale!
</p>
<p>
How cheerfully he seems to grin,
<br>How neatly spread his claws,
<br>And welcome little fishes in
<br>With gently smiling jaws!
</p>
</div>
</body> How doth the little crocodile
How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
How cheerfully he seems to grin,
How neatly spread his claws,
And welcome little fishes in
With gently smiling jaws!
How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!
Использование не по назначению
ЦСС — свободный язык и прощает использование маржинов и падингов бессистемно и не по назначению.
Никто не запретит вам задавать падингами внешние отступы, а маржинами — внутренние. Но так вёрстка быстро потеряет гибкость, начнёт вести себя непредсказуемо, работать с ней станет сложнее. Поэтому я рекомендую использовать свойства по назначению.
Конечно, бывают исключения. Если вы уверены, что нарушение правил пойдёт на пользу вёрстке и тем, кто с ней работает, — пожалуйста. Любые правила не обязательно соблюдать, но очень важно понимать :‑)
См. также:
Вёрстка слева направо и сверху вниз
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Поделиться
Запинить
Твитнуть
Свежак
поля и отступы — учебник CSS
В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ).
Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.
Создавать промежутки между элементами можно и тем, и другим способом, но если 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 значения. От количества значений зависит, как распределяются настройки:
Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.
Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px, а для нижнего – margin: 30px. Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.
Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.
Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному:
- Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
- Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях
20pxи-18pxразмер поля будет равен:20+(-18)=20—18=2пикселя. - Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел).
Пример: необходимо сравнить значения полей -6pxи-8px. Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что68, то есть,-6>-8. Итоговый размер поля равен-8пикселей. - В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
- Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.
Пример: необходимо сравнить значения полей Далее в учебнике: блочные и строчные элементы HTML, свойство display CSS.
Маржапротив заполнения: в чем разница?
Обновлено 05.02.2020
Когда вы начнете проектировать, вы будете часто слышать слова «поле» и «отступ».
Довольно быстро вы поймете, что речь идет о пространстве между элементами. Поначалу эти два слова могут сбивать с толку, поскольку они оба имеют отношение к одному и тому же. Тем не менее, есть важные различия, и как только вы их поймете, вы сможете принимать лучшие дизайнерские решения.
Поле
Поле — это пространство между границей и следующим элементом вашего дизайна. Подумайте о пространстве за границей и между ним и другими элементами. Это все маржа. Поля охватывают все четыре стороны контента, и вы можете указать и изменить поля для каждой стороны.
Padding
Padding — это пространство внутри элемента между элементом и границей. Отступы охватывают все четыре стороны содержимого, и вы можете указать и изменить отступы для каждой стороны (точно так же, как поля).
Изображение разницы между полем и отступом
Самый простой способ понять разницу между полем и отступом — это изображение ниже. Он демонстрирует, как выглядит каждая часть чего-либо (например, элемент абзаца).
Блочная модель в CSS
Изображение выше также называется «блочной моделью» и используется при работе с CSS. Важно понимать, как работает блочная модель, чтобы понять, как работают ширина и высота ваших элементов.
Когда вы устанавливаете ширину и высоту элемента, это относится только к области содержимого. Вам, вероятно, придется немного посчитать, чтобы убедиться, что ваши элементы выстраиваются правильно из-за полей и отступов.
Новичкам важно отметить, что поля и отступы могут сбивать с толку, потому что они по-прежнему будут частями вашего элемента, даже если вы не включаете границу.
На изображении ниже у нас есть два блока содержимого без дополнительной границы. Вы можете видеть, что поля и отступы все еще действительны.
Разница в кодировании полей и отступов в CSS
При разработке существуют некоторые различия в кодировании полей и отступов, когда вы используете CSS для стилизации HTML.
Как добавить поля в CSS
Необходимо объявить четыре поля, чтобы они не сливались друг с другом:
Верхнее поле
Поле справа
Поле-нижнее
Поле слева
Чтобы вам не приходилось устанавливать все четыре поля по отдельности, свойство margin позволяет вам установить их все в одном объявлении.
Если вам нужна другая длина поля или процентное соотношение для одного или нескольких полей, это можно сделать отдельно.
Например, если вам нужно 30 пикселей вверху, 75 пикселей справа, 45 пикселей внизу и 100 пикселей слева, используйте:
p {
margin: 30px 75px 45 пикселей 100 пикселей;
}
Примечание : Элемент идет по часовой стрелке.
Чтобы использовать процент в CSS, он должен быть процентом от встроенного размера родителя, чтобы вы получали поля одинакового размера со всех сторон.
Распространенной проблемой при разработке полей является схлопывание полей. Когда заголовок имеет нижнее поле, за которым следует абзац с верхним полем, поле сворачивается для объединения. Это делает так, что пространство между двумя элементами становится больше. По сути, меньшее поле заканчивается внутри большего поля.
Существует несколько способов предотвращения схлопывания полей, но, пожалуй, два наиболее распространенных решения следующие:
Контекст блочного форматирования (BFC) : Это предотвратит схлопывание полей за счет включения элемента.
Контейнеры Flex и Grid : устанавливает контексты форматирования для своего содержимого.
Как добавить отступы в CSS
Для отступов в CSS используется тот же базовый код, что и для полей, за исключением того, что термин «отступы» заменяет термин «поля».
Обивка
Прокладка правая
Подкладка-дно
Прокладка левая
Каждое свойство заполнения может иметь указанную длину, % и наследование. В противном случае использование свойства padding позволяет установить все стороны в одном объявлении.
Например:
div {
заполнение: 20px 25px 50px 75px;
}
Примечание : Элемент идет по часовой стрелке.
Узнайте больше о кодировании в CSS
Теперь, когда вы узнали разницу между отступами и полями в CSS, готовы ли вы узнать больше? Pluralsight предлагает множество курсов по CSS и другие ресурсы, которые дадут вам преимущество в вашей карьере.
Начните сегодня!
Отступы и поля: основные различия и когда их использовать
Прочтите это руководство, чтобы узнать разницу между отступами и полями, когда использовать отступы и поля и как их использовать.
В веб-разработке и дизайне поле элемента представляет собой внешнее пространство самого элемента, а отступ представляет собой внутреннее пространство, окружающее элемент. Важно понимать, как различные компоненты, такие как отступы и поля, объединяются для разделения текста и графики. Это побуждает вас создавать веб-сайт, который выглядит чистым и легко читаемым.
Если вам интересно узнать больше о том, что такое отступы и поля и как они используются, это руководство охватит все, что вам нужно знать.
Объяснение отступов и полей
При разработке веб-сайта отступы и поля необходимы для того, чтобы дизайн вашего веб-сайта был лаконичным и гладким. Они также могут помочь увеличить скорость загрузки вашего веб-сайта и установить единообразие для всех устройств и браузеров.
Что такое заполнение?
Отступы — это пространство между содержимым и границей элемента. Отступы полезны для создания дополнительного пространства внутри элемента, удерживая его на заданном расстоянии от других аспектов веб-сайта. Использование отступов чрезвычайно полезно, когда вам нужно разделить текстовые поля и изображения, сохраняя при этом их выравнивание.
Что такое маржа?
Поле — это пространство вокруг границы элемента. Поле, окружающее элемент, будет информировать используемый веб-браузер о том, сколько места должно быть оставлено между независимыми элементами и внешним полем страницы веб-сайта. Поля также можно использовать для того, чтобы разные элементы находились на одинаковом расстоянии друг от друга.
Прежде чем приступить к созданию веб-сайта любого типа, лучше ознакомиться с различиями и сходствами отступов и отступов, чтобы убедиться, что вы применяете правильные настройки для каждого из них и используете их правильно.
Как только вы узнаете разницу между отступами и полями, вы сможете определить наилучший метод включения как в макет, так и в дизайн вашего собственного веб-сайта.
Помните о следующих различиях между отступами и полями:
- Отступ представляет количество внутреннего пространства, которое имеет элемент, а поле — это свободное пространство, окружающее элемент.
- Невозможно установить автоматическое заполнение. Однако вы можете использовать автоматические настройки полей.
- Невозможно использовать отрицательные значения при определении отступов, но можно с полями.
- На отступы может влиять стиль других элементов веб-сайта. На маржу не повлияет стилизация других элементов сайта.
Когда использовать отступы и поля
При создании веб-сайта важно знать, когда использовать отступы и поля. Как только вы ознакомитесь с различиями между полями и отступами, вам будет легче определить, когда настало время реализовать поля на странице, а когда следует использовать отступы.
Перед тем, как приступить к проекту разработки веб-сайта, следует помнить несколько вещей об отступах и полях.
Когда использовать заполнение:
- Изменение размера элемента . Если вы хотите расширить пространство вокруг элемента, вы можете добавить или увеличить окружающий его отступ. Это может быть полезно при работе с интерактивными элементами, такими как кнопки или ссылки на изображения.
- Добавить пробел между границами и содержимым . Использование отступов для добавления пространства между содержимым и соответствующей ему границей — это один из способов обеспечить соответствие дизайна другим элементам на странице. Это может помочь вам увеличить пустое пространство вашей графики или веб-сайта, что является основополагающим в веб-дизайне.
Когда использовать поля:
- Настройка позиционирования элемента . Одной из наиболее распространенных причин использования полей при проектировании и разработке сайта является изменение положения определенного элемента. Использование полей может помочь вам переместить элемент в зависимости от того, предпочитаете ли вы, чтобы он располагался по центру страницы или располагался справа или слева. Вы также можете выбрать, будет ли элемент фиксированным и будет прокручиваться вдоль страницы, или он должен оставаться на одном месте, когда пользователь прокручивает страницу.
- Элементы перекрытия . Если вы хотите перекрывать определенные элементы друг с другом, вы можете сделать это с помощью полей. Использование отрицательного значения поля — один из самых быстрых способов позволить элементам перекрываться друг с другом.
- Установочное расстояние . Установить расстояние между элементами будет намного проще, если вы знакомы с полями и принципом их работы. Включение нужного количества пробелов может означать разницу между созданием привлекательного веб-сайта, процветающего с трафиком, и отказом от потенциальных клиентов.
Вы также можете выбрать, будет ли элемент фиксированным и будет прокручиваться вдоль страницы, или он должен оставаться на одном месте, когда пользователь прокручивает страницу.Как использовать отступы и поля в CSS
Как только вы узнаете, когда использовать отступы и поля, вы можете начать изучать, как использовать отступы и поля с файлами CSS вашего веб-сайта.
Что такое CSS?
CSS, или каскадные таблицы стилей, является одним из самых популярных языков компьютерного программирования, специально разработанным с учетом стилизации разметки. CSS используется с HTML, чтобы оживить цветовые схемы и другие визуальные элементы. Без CSS веб-сайт, скорее всего, будет казаться простым или устаревшим и лишенным какого-либо цвета.
CSS позволяет разработчикам определять форматирование и стиль макета веб-сайта, логотип, шрифты, отступы и многое другое. Использование CSS предоставляет больше возможностей при настройке отступов и полей определенных элементов или универсальных элементов веб-сайта, в зависимости от того, как веб-сайт был разработан и отформатирован.
Добавление полей (CSS)
Если вы хотите добавить поля на любую веб-страницу, вы можете использовать свой собственный файл CSS, чтобы упростить процесс и применять поля по всем направлениям. Использование файла CSS для установки полей на месте может помочь сэкономить время, не требуя ручного редактирования каждой отдельной страницы, на которой вы хотите использовать поля.
Чтобы начать добавлять поля в файл CSS вашего веб-сайта, важно помнить, что каждый элемент HTML, который вы внедряете на свой веб-сайт, имеет 4 поля, которые можно редактировать и форматировать. 4 поля HTML-элементов включают: левое, верхнее, правое и нижнее. Если вы хотите установить одинаковое значение поля для всех сторон, вы можете использовать упрощенное свойство 90 194 поля 90 195, а не указывать каждую сторону по отдельности.
Например, если вы хотите, чтобы часть вашего веб-сайта имела отступ в 10 пикселей, ваш файл CSS может появиться с фрагментом, который выглядит следующим образом:
#maincontent { margin: 10px; }
Однако, если вы хотите отредактировать только количество места, которое элемент имеет в нижней части страницы, ваш фрагмент CSS может выглядеть так:
#maincontent { margin-bottom: 10px; }
При использовании любого варианта форматирования (поле-левое, верхнее поле, правое поле или поле-нижнее) помните, что установленное вами число будет числом пикселей, в которых элемент появляется из указанного обозначения. Например, если вы установите для параметра margin-right значение «50 пикселей», ваш элемент будет отображаться на расстоянии 50 пикселей от крайнего правого края страницы или элемента, в котором он содержится.
Обратите внимание, что к элементу также можно применить более 1 значения поля. Вы можете применить 2, 3 или даже 4 отдельных определения полей к элементу в зависимости от текущего макета и настроек вашего веб-сайта. Если вы решите включить в элемент более одного значения поля, имейте в виду, что они будут загружаться и отображаться в следующей системе:
- 2 значения . Использование двух значений полей будет применяться как к верхнему, так и к нижнему, а также к правому и левому краю элемента одновременно.
- 3 значения . 3 значения полей будут применяться к верхней, левой и правой (вместе) и нижней части элемента.
- 4 значения . 4 значения поля будут применяться индивидуально, начиная сверху и продвигаясь вправо, вниз и влево.
Благодаря возможности добавлять более одного значения поля к элементу, вы можете полностью контролировать, как макет вашего веб-сайта загружается для ваших посетителей, независимо от того, просматривают ли они веб-страницы или смартфоны.
Оживите свой бренд с помощью собственного веб-сайта. Спроектируйте с нуля, подключите домен, проанализируйте трафик и оптимизируйте для SEO.
Зарегистрироваться
Добавление отступов (CSS)
Добавление отступов к определенному элементу на вашем веб-сайте аналогично добавлению полей, поэтому важно понимать разницу между отступами и отступами, прежде чем приступать к дизайну вашего веб-сайта или блога.
Подобно сокращенному коду поля, сокращенный код заполнения использует слово «заполнение» как четкий индикатор того, где в макете присутствует заполнение. Кроме того, набивка также имеет 4 стороны.
Если вы хотите добавить отступ в 20 пикселей внутри элемента, чтобы обеспечить больше пробелов для текста или мультимедиа, вы можете сделать это со следующими настройками заполнения:
#maincontainer { padding: 20px; }
Отступы также могут быть настроены с использованием до 4 значений. Вы можете использовать универсальный параметр отступа, чтобы одновременно установить отступ со всех сторон элемента, или вы можете использовать 2, 3 или все 4 значения при определении отступа определенного объекта или веб-элемента.
Если вы решите использовать более 1 значения при определении размера заполнения элемента, имейте в виду следующее:
- 2 значения . Использование двух значений отступов приведет к тому, что отступ элемента будет применяться как к верхней, так и к нижней части (с использованием первого параметра), а также к левому и правому краю (с использованием второго значения).
- 3 значения . С 3 значениями отступ элемента будет применяться сверху, слева и справа (используя второе значение), а затем снизу.
- 4 значения . Если вы решите использовать все 4 значения при определении заполнения элемента, каждое отдельное значение будет представлять верхнюю, правую, нижнюю и левую части элемента.
Элемент, использующий все 4 значения для определения отступа, может выглядеть в файле CSS примерно так:
#maincontent { padding: 10px 30px 10px 20px; }
Как использовать отступы и поля в HTML
Хотя многие веб-дизайнеры и разработчики предпочитают использовать краткий файл CSS для загрузки различных элементов и настроек на всем веб-сайте, также можно использовать HTML для включения различных настроек элементов, включая отступы. и поля. Знание того, как использовать HTML для отступов и полей, поможет вам сэкономить время при следующем обновлении собственного веб-сайта.
Что такое HTML?
HTML, также известный как язык гипертекстовой разметки, является наиболее распространенным языком веб-программирования, используемым сегодня для создания и настройки веб-страниц. Хотя это не самый часто используемый язык для разработки приложений или новых технологий, HTML является основополагающим языком, который использовался для разработки большей части веб-сайтов, которые мы знаем и любим сегодня. Независимо от того, предпочитаете ли вы работать в традиционном Блокноте для создания своих веб-сайтов или в HTML-редакторах, сегодня HTML прошел долгий путь, когда дело доходит до создания, проектирования и настройки страниц.
Хотя HTML может многое предложить для разработки основных строительных блоков и элементов веб-сайта, работать с ним при редактировании и настройке различных элементов, включая поля и отступы объекта, по-прежнему гораздо утомительнее. До того, как CSS стал более распространенным, таблицы обычно использовались для ввода полей и отступов для определенных элементов. В противном случае размер каждого элемента должен быть определен сразу в коде, что не всегда хорошо работает для тех, кто заинтересован в адаптивном и удобном для мобильных устройств дизайне.
В прошлом при использовании HTML поля и отступы могли выглядеть следующим образом: настройка таблицы для автоматического управления полями и отступами. Типичная HTML-таблица выглядит так:
<тд>
Хотя можно реализовать основные настройки с помощью HTML, лучше всего использовать как HTML, так и CSS при разработке любого веб-сайта для полной настройки, особенно при настройке определенных полей и параметров отступов.
Советы по использованию отступов и полей
Вот несколько полезных советов по использованию отступов и полей:
- Используйте поля для увеличения пробелов за пределами элемента или самой страницы . Поля идеально подходят для работы с внешним видом элемента. Они полезны для более крупных элементов, которые содержат дополнительные компоненты внутри. На поля не может повлиять внешняя стилизация или любые другие настройки CSS, установленные на вашем веб-сайте.
- Избегайте использования простого HTML для форматирования всех параметров полей и отступов . Если вы предпочитаете иметь больший контроль над настройкой каждого из ваших элементов, используйте CSS.
- Ознакомьтесь с CSS, чтобы реализовать собственный файл CSS на своем веб-сайте . Файл CSS, который включает в себя все настройки отступов и полей, которые вы хотите использовать, поможет сэкономить время и оптимизировать ваши усилия по разработке.