Очень часто начинающие блогеры спрашивают, как разместить элементы страницы относительно того или другого края. Вот сделала сегодня шпаргалку - подсказку, чтобы была возможность наглядно посмотреть.
Разберёмся уже со свойствами margin и padding, которые и задают эти отступы.
Разберёмся уже со свойствами 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>
<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>
<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>
<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>
<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 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. Ещё и границу сделали.
Хочется надеяться, что понятно объяснила про поля и отступы элементов. Часто публикую коды и появляются вопросы относительно, как и что расположить.
Всем спасибо за внимание. До встречи.
здесь можно оформить подписку на новые шпаргалки
Интересно! Буду разбираться! Спасибо, Виктория! Я давно думала, что вот бы ты давала нам основы программирования. Хотя бы немного разбираться в HTML и Java Script.
ОтветитьУдалитьИрина, вроде, как я помню, ты начинала изучать CSS.
УдалитьКругом рождественская мгла.
ОтветитьУдалитьВо мгле гудят колокола,
И с ними в лад Слова звучат:
«Мир на земле и счастья всем!».
Я чувствовал, как в этот день,
Жизнь городов и деревень
Объединив, звучит призыв:
«Мир на земле и счастья всем!»
С РОЖДЕСТВОМ!!!
Да, Виктория, я изучала основы программирования. Но не все. Такой темы там не было. Было только самое основное.
Ирина, тебя с праздником.
УдалитьА эта тема вообще должна быть в первую очередь. Самое то для начала.
Спасибо. С Рождеством!
ОтветитьУдалитьСпасибо, Семён. Тебе тоже всяческих благ.
Удалить