Блог Тимура Казанского

Отступы и поля в CSS


Всем доброго времени суток! Сегодня мы затронем одну из важных тем, под названием отступы и поля в CSS. И начну я, пожалуй, с представления картинки, при просмотре которой, вам сразу станет понятно, что такое поля, граница и отступы в css, ну а потом уже разберем и тонкости управления ими.

padding и margin в css

отступы и поля в css

Отступы

Отступ (padding) – это пространство, которое находится между областью содержимого (например текст или изображение) и границей.

При помощи данного свойства мы можем задавать отступы, как сверху (padding-top) и снизу (padding-bottom), так справа (padding-right) и слева (padding-left). Значения данного свойства указываются в виде пикселей (при фиксированной верстке) и в виде процентов (при адаптивной верстке).

<style>
.primer {
padding-top: 20px;
padding-right: 10%;
padding-bottom: 20px;
padding-left: 10%;
}
</style>

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

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

Если вы хотите сократить код в вашем документе, но можете воспользоваться сокращенным указанием значений, а именно:

  • 1. Указав только одно значение:
    padding: 20px;

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

  • 2. Указав 2 значения:
    padding: 10% 20px;

Верхний и нижний отступы будут равны 10%, правый и левый 20px.

  • 3. Указав 3 значения:
    padding: 10% 20px 5%;

Верхний отступ 10 процентов, правый и левый 20 пикселей, нижний 5 процентов соответственно.

  • 4. Указав 4 значения:
    padding: 10% 20px 10% 20px;

В данном случае значения указываются по часовой стрелке, начиная с верхнего отступа и заканчивая левым, т.е. верх равен 10 процентам, правый отступ 20 пикселям, нижний 10-ти процентам и левый отступ 20-ти пикселям.

Поля

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

Схлопывание полей происходит при совмещении двух элементов располагающихся вертикально, например, если возьмем 2 абзаца, которые располагаются друг над другом, и у первого абзаца нижний отступ будет равен 5px, а у нижнего абзаца верхний отступ будет равен 3px, то суммарно, расстояние между двумя абзацами, будет равно величине большей из этих двух отступов, а именно не 8 px, а 5px.

Хочу отметить, что горизонтальные поля не схлопываются.

<style>
.primer {
margin-top: 20px;
margin-right: 10%;
margin-bottom: 20px;
margin-left: 10%;
}
</style>

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

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

Категория: Уроки CSS для чайников

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0