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