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

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


6 комментариев:

  1. Интересно! Буду разбираться! Спасибо, Виктория! Я давно думала, что вот бы ты давала нам основы программирования. Хотя бы немного разбираться в HTML и Java Script.

    ОтветитьУдалить
    Ответы
    1. Ирина, вроде, как я помню, ты начинала изучать CSS.

      Удалить
  2. Кругом рождественская мгла.
    Во мгле гудят колокола,
    И с ними в лад Слова звучат:
    «Мир на земле и счастья всем!».
    Я чувствовал, как в этот день,
    Жизнь городов и деревень
    Объединив, звучит призыв:
    «Мир на земле и счастья всем!»
    С РОЖДЕСТВОМ!!!

    Да, Виктория, я изучала основы программирования. Но не все. Такой темы там не было. Было только самое основное.

    ОтветитьУдалить
    Ответы
    1. Ирина, тебя с праздником.
      А эта тема вообще должна быть в первую очередь. Самое то для начала.

      Удалить
  3. Спасибо. С Рождеством!

    ОтветитьУдалить
    Ответы
    1. Спасибо, Семён. Тебе тоже всяческих благ.

      Удалить

Пользовательский поиск