Содержание

Свойство padding в CSS и свойство margin в CSS

Сегодня мы поработаем над пониманием разницы между padding (внутренний отступ) и margin (внешний отступ) в CSS. Но сначала разберемся с их синтаксисом. Существует несколько способов написания этих свойств: обычный и сокращенный:

Обычную форму записи рассматриваемых свойств проще понять, потому что она похожа на все остальные стилевые записи:

Обычная запись:

padding-top: 10px;
 padding-right: 20px;
 padding-bottom: 10px;
 padding-left: 20px;

С другой стороны, сокращенная запись в CSS объединяет в себе все эти свойства в одно общее свойство «padding«.

Краткая запись:

padding: 10px 20px 40px 10px;

У  margin и padding есть четыре значения: верхнее, правое, нижнее и левое. В сокращенной записи, показанной выше, так же задаются четыре значения, отделенных друг от друга пробелом. Первое из четырех значений отступ сверху, затем отступ справа, снизу (padding bottom HTML) и слева:

padding: TOP RIGHT BOTTOM LEFT;  (padding: сверху справа снизу слева)

Эту запись можно сократить запись до трех значений, если левый и правый padding/margin одинаковы. Например, если верхний отступ равен 30px, левый и правый по 10px, а нижний — 40px, то можно использовать следующую форму записи:

Если верхний и нижний padding/margin одинаковы, а правый и левый padding/margin тоже одинаковы, то можно указывать только два значения. В этом примере у нас есть верхний и нижний отступы, которые равны 10px, а левый и правый отступы — по 20px. Наш CSS будет выглядеть следующим образом:

padding: TOP/BOTTOM RIGHT/LEFT; (padding: сверху/снизу  справа/слева)

padding: 10px 20px;

Наша последняя версия сокращенной записи для  margin и padding  содержит только одно значение. Эту запись можно использовать, когда все отступы (сверху, снизу, справа и слева) имеют одно и то же значение. Если бы мы хотели, чтобы все стороны имели отступы по 20px, то CSS выглядел бы следующим образом:

Когда какой формат записи использовать? Например, если нужно задать элементу только нижний отступ, я буду использовать обычную запись, так как нужно применить свойство только к одной стороне: padding-bottom: 30px;

Между этими двумя свойствами существует ощутимая разница. Padding используется для задания пространства внутри контейнера HTML-элемента. Margin используется для задания пространства вокруг внешней границы элементов.

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

Также можно думать о padding как о наполнителе в картонной коробке. Когда вы наполняете коробку пенопластом, вы удерживайте им содержимое на расстоянии от краев коробки. Padding в CSS делает то же самое.

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

Рассмотрим свойства на примерах с элементами. Мы начнем с абзаца (тега <p>), затем добавим к нему цвет фона и добавим отступ 30px с каждой стороны.

Ниже слева видно, что это абзац с padding 30px вокруг него. На изображении справа я использовал инструменты Google Chrome, чтобы показать, где padding HTML начинается /заканчивается для этого элемента. Зеленый цвет на изображении ниже – это padding, который расположен вокруг контейнера. Темно-синий цвет фона заполняет внутреннюю область:


Теперь добавим margin абзацу. Я добавлю отступ сверху и снизу 30px, а также 20px слева и справа. Ниже на изображении слева показано, как этот абзац изменился с margin. Фактическая ширина изображения стала меньше, потому что margin отталкивает от границ другой HTML элемент. Справа видно, что оранжевый цвет – это margin вокруг элемента. margin всегда находится за пределами padding и темно-синий фон не распространяется на область margin:
Если вы до сих пор путаетесь, как использовать margin и padding, то пришло время экспериментировать! Чем больше вы будете использовать свойства CSS, и изменять их значения, тем лучше поймете, как они работают.

Данная публикация является переводом статьи «CSS PADDING VS. MARGIN AND HOW TO USE THEM» , подготовленная редакцией проекта.

Margin и Padding — в чем разница блочных моделей css?

margin и padding являются наиболее популярными свойствами для расстановки элементов. В то время как margin определяет пространство за пределами (

снаружи) элемента, padding определяет пространство внутри элемента.

Замените CSS-код для элемента h3 следующим:

h3 {
	font-size: 1.5em;
	background-color: #ccc;
	margin: 1em;
	padding: 3em;
}

Вы заметите, что пространство шириной в один знак (margin) было оставлено около заголовка второго уровня,а сам заголовок стал толще в результате padding, равного 3 знакам.

Вы можете задавать margin и padding для четырех сторон элемента по отдельности: margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom и padding-left.

Блочная модель

Margin, padding и border – это части так называемой Блочной модели. Механизм Блочной модели следующий: Посередине есть зона контента, которую окружает padding, окруженный границей border, которая в свою очередь окружена полями margin. Визуально представление Блочной модели выглядит так:

Не обязательно использовать все эти элементы, но блочная модель может использоваться с любым элементом на странице, и это мощный инструмент.


Оцени статью

Оценить

Средняя оценка / 5. Количество голосов:

Спасибо, помогите другим — напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

Напишите комментарий, что можно добавить к статье, какой информации не хватает.

Отправить

Спасибо за ваши отзыв!

Порядок и способы установки значений margin и padding и их особенности.

Свойства margin и padding в CSS имеют некоторые особенности в способах задания размеров, которые они могут принимать. 

Давайте остановимся подробнее на этом вопросе, какие есть способы задания значений для свойств margin и padding. 

Важно, для этих свойств очень важен порядок установки их значений. См. видео, чтобы увидеть этот самый порядок. Когда вы будете задавать значения для этих свойств, то эти свойства, в зависимости от очередности их задания, будут распределяться следующим образом:

1-е значение — верхняя часть блока.

2-е — правая часть блока.

3-е значение — нижняя часть.

4-е — к левой.

Эту картинку нужно просто «сфотографировать» у себя в голове, чтобы она «засела» у вас в памяти и когда вы будете работать с этими свойствами, чтобы вы могли ее просто вспомнить и быстро применить.

Давайте теперь посмотрим это на практике.

HTML:

<div>
</div>

CSS: 

.block {
    padding: 30px;
}

См. видео, чтобы наглядно увидеть, какой эффект будут иметь разные способы задания этих значений.

Если кратко:

padding:10px 20px 30px 40px;

Внутренний отступ для верхней стороны будет 10px, для правой стороны 20px, для нижней 30px и для левой 40px. Значения распределяются в порядке по часовой стрелке.

Есть и сокращенные формы записи.

padding:30px;

Внутренний отступ применяется для всех сторон в значении 30px (верхней, правой, нижней и левой).

padding:30px 20px;

Внутренний отступ для верхней и нижней стороны применяется в значении 30px и для левой и правой стороны блока в значении 20px.

padding:30px 10px 20px;

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

Аналогично все работает для свойства margin.

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

Свойства margin , padding , строчные и блочные элементы.

Давайте рассмотрим, что такое margin и padding и какие между ними различия. Margin это внешний отступ элемента, а padding внутренний.

Если мы имеем два блока один в одном и для внутреннего блока нужен отступ мы используем свойство padding. Но если у нас есть два блока
расположенные радом друг с другом и нужно задать отступ между ними, мы используем свойство margin.Обращаем внимание что для первой картинки могут быть использованы как padding так и margin. Разница в том, что как говорилось ранее padding это внутренний отступ и для размещения внутреннего блока свойство padding задается наружному блоку. Margin работает примерно так же, но наоборот, задается внутреннему блоку для отступа от наружного.

Пример на первую картинку c использованием свойства padding:

<style>
.blok-verhniy{padding-top: 10px; padding-right: 10px; padding-bottom:
10px; padding-left: 10px; }
</style>
<body>
<div>
<div></div>
</div>
</body>

И пример с использованием margin:

<style>
.blok-vnytreniy{margin-top: 10px; margin-right: 10px; margin-bottom:
10px; margin-left: 10px; }
</style>
</head>
<body>
<div>
<div></div>
</div>

</body>

Пример для второй картинки:

<style>
.blok-right{margin-left: 15px;}
</style>
</head>
<body>
<span></span >
<span></span >

</body>

Рассматривая эти свойства на практике более сильным приоритет будет обладать свойство margin в отличии от свойства padding. Но для внутреннего отступа желательно использовать свойство padding.

Форма записи.

Padding-top:значение; Margin- op:значение;
Padding-right:значение; Margin-right:значение;
Padding-bottom:значение; Margin-bottom:значение;

Padding-bottom:значение; Margin-bottom:значение;

Значения этим свойствам задаются в: px, %, em и тд. Например: Padding-top:25px; Также существует сокращенная запись margin и padding.

4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева:

padding: 2px 4px 5px 10px;
margin: 2px 4px 5px 10px;

3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней:

padding: 3px 6px 9px;
margin: 3px 6px 9px;

2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой:

padding: 6px 12px;
margin: 6px 12px;

1 значение: задаются одинаковые отступы для всех сторон элемента:

padding: 3px;
margin: 3px;

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

К блочным элементам относятся тэги:

<address>, <blockquote>, <div>, <fieldset>, <form>, <h2>,…,<h6>, <hr>, <ol>, 
<p>, <pre>, <table>, <ul>

и элементы у которых значение display задано как block, list-item, table.

К строчным элементам относятся тэги:  <img>, <span>, <a>, <q>, <code>  и элементы у которых значение display установлено как inline.
Как мы видим не зависимо от начального состояния элемента (сторчный или блочный) его значение можно изменить с помощью свойства display.

Если у вас появились вопросы, хотели бы записаться на урок, заказать статью(инструкцию) или приобрести видеоурок — пишите нам в: скайп: olegg.pann telegram, viber,whatsap — +380672998330 добавляйтесь на телеграмм-канал: t.me/webyk email: [email protected] мы в vk: vk.com/programing24 мы в fb: www.facebook.com/webprograming24 Обязательно оперативно ответим на все вопросы


Поделитесь в социальных сетях