Отступы и поля - пояснение и примеры

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

Хотя они и очень похожи, но работают по разному.  

Представьте себе обычный лист бумаги, где нужно разместить текст или картинку в строго определённом месте.

Свойство margin задаёт расстояние от края страницы до определённого элемента.

 Для примера создадим 2 блога с разным цветом границ, чтоб понятнее было, не используя свойство margin.

<div class="small">
<div style="width: 250px; border: 1px solid red;">
<div style="height: 100px; border: 1px solid blue;">

</div>
</div>
</div>

Так это будет выглядеть в браузере - границы слиплись.

А теперь добавим значение margin: 40 px и уже получаем следующее.

<div class="small">
<div style="width: 250px; border: 1px solid red;">
<div style="height: 100px; border: 1px solid blue; margin: 40px;">

</div>
</div>
</div>

Как показано на первой картинке свойство margin можно задать для любой стороны.
Сверху - margin-top, справа - margin-right, снизу - margin-bottom и слева margin-left. Если задать одно значение, то оно будет применено для всех сторон одинаково.
Вы можете задать абсолютно разные значения у каждой стороны и задать разные отступы у разных сторон.

При использовании свойства margin можно добавлять значения для каждой из сторон в таком порядке -

 margin:5px 15px 5px 15px;

Первое 5px верхний отступ, 15px отступ справа, 5px отступ снизу и 15px отступ слева. Получается по часовой стрелке.

margin можно применять и для центрирования элементов на странице, используя значение auto. Но тут обязательно должны быть заданы размеры блока. И применяется именно к блочным элементам. Текст выравнивается с помощью text-align.

Приведу пример. Тот же блок, только верхний и нижний отступ 15px; а правая и левая сторона задана значениями margin-left: auto; и margin-right: auto;

<div class="small">
<div style="width: 100%; border: 1px solid red;">
<div style="width: 200px; height: 100px; border: 1px solid blue; margin: 10px auto;">

</div>
</div>
</div>

Результат.

Давайте, в качестве примера, попробуем вставить картинку. Нам нужно просто создать класс и задать соответственно отступы. В код добавим свойство background для большего эффекта. В режиме HTML вставляем код

<div class="smaill">
<div style="background-color: #c7b39b; border: 1px solid red; width: 100%;">
<div style="background-image: url(http://img1.liveinternet.ru/images/attach/c/5/87/769/87769957_smayl36.jpg); border: 3px solid green; height: 100px; margin: 40px ; width: 250px;">
</div>
</div>
</div>

Результат

Вот так работает свойство margin, которое задаёт отступы снаружи элемента.

Свойство padding в отличии от margin задаёт отступы внутри самого элемента и работает по тому же принципу. Так же можно задавать различные значения для всех 4 - ох сторон. Вот только auto здесь работать не будет.

Сразу зададим класс нашему блоку с текстом и оформим его без padding .

<div class=" text">
<div style="border: 2px solid green; text-align: justify; width: 400px;">здесь будет текст или картинка
</div>
</div>

Вот что видим в браузере. Текст прилип ко всем сторонам блока.

Когда бы Пушкин наш посиживал в рунете, Он полюбил бы смайлики вот эти? Выстраивал их в ряд и в виде лестниц В альбомы милых барышень-прелестниц? И не было бы «чудного мгновенья», Ни Божества, ни Вдохновенья… А ныне вот оно - «очей очарованье»: Кривулек мелких хитрое кривлянье.

Добавляем внутренние отступы со всех сторон.

<div class=" text">
<div style="border: 2px solid green; text-align: justify; padding: 30px;
width: 400px;">здесь будет текст или картинка
</div>
</div>

Получаем.

Когда бы Пушкин наш посиживал в рунете, Он полюбил бы смайлики вот эти? Выстраивал их в ряд и в виде лестниц В альбомы милых барышень-прелестниц? И не было бы «чудного мгновенья», Ни Божества, ни Вдохновенья… А ныне вот оно - «очей очарованье»: Кривулек мелких хитрое кривлянье.

Я на схеме ещё отметила значение border, чтобы выделить блоки. border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения можно распределить в любом порядке. Границы так же можно задать для любой стороны border-top, border-bottom, border-left, border-right.

Можно задать различные стили для границ.

<div class="smaill 1">
<div style="background-color: #c7b39b; border: 3px solid #00a8e1; width: 100%;">
<div style="background-image: url(http://img1.liveinternet.ru/images/attach/c/5/87/769/87769957_smayl36.jpg); border: double; height: 100px; margin: 30px auto 10px; width: 200px;">
</div>
</div>
</div>

В начале статьи обратила ваше внимание, чтобы вы представили страницу в виде чистого листа, на котором расположен какой - то элемент и нам нужно его, как картинку в рамке, расположить относительно края этого листа  - margin и сам блок с картинкой - внутренние отступы - padding. Ещё и границу сделали.

Хочется надеяться, что понятно объяснила про поля и отступы элементов. Часто публикую коды и появляются вопросы относительно, как и что расположить.

Всем спасибо за внимание. До встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email