В CSS есть два очень важных свойства: margin и padding. Они задают отступ от содержимого и имеют один синтаксис.
свойство: 1px 2px 3px 4px;Значения поочерёдно задаются от верхнего, правого, нижнего и левого края. Возможно использование производных: свойство-top, свойство-right, свойство-bottom, свойство-left. Если пишем одно значение, то отступы будут установлены одновременно от каждого края элемента.
свойство: 1234px;
Величина полей указывается в px, процентах (%) или других единицах.
Margin определяет внешний отступ от других элементов и может принимать отрицательные значения, padding - внутренний.
 |
| Свойства padding margin. |
Padding увеличивает ширину элемента, margin расширяет "коробку", в которой тот находится. Здесь можно уловить разницу между ними.
| padding: 0; margin: 0; | padding: 10px; margin: 0; | padding:-10px; margin: 0; |
|---|---|---|
 | | |
| padding: 0; margin: -10px; | padding: 0; margin: 10px; | padding: 10px; margin: 10px; | | | |
| Несколько элементов padding: 10px; margin: 10px; | ||
| ||
| Слева направо увеличиваем padding и уменьшаем margin | ||
| ||
| Если мы укажем для блока div, у которого задана ширина width, margin: 0 auto; то сможем выравнять его по центру в горизонтальной плоскости. Любые теги могут быть преобразованы в блок, если им присвоим свойство display: block;. | ||
| ||
| Увеличив до margin: 10px auto; расширим границы сверху и снизу до элемента | ||
| ||
| И для последней картинкой дадим четыре разных значения padding для сторон смайла. | ||
| ||
Это код последнего изображения:
<img style="background-color: #3872ef; margin: 10px auto; width: 32px; display: block; padding: 10px 20px 30px 50px;" src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" border="1">
Отрицательный margin
<style type="text/css">
.temnyi { background-color: #666; height: 100px; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; }
.svetlyi2 { background-color: #fff; width: 250px; }
</style>
Строка, которая позволяет сориентироваться.
<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
</div>Строка, которая позволяет сориентироваться.
А
Б
Добавим отрицательный margin. Блок Б находится над блокам А, поскольку в коде располагается ниже его. Одновременно видно содержимое обоих элементов.
<style type="text/css">
.temnyi { background-color: #666; height: 100px; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -30px -30px 30px; }
.svetlyi2 { background-color: #fff; width: 250px; }
</style>
Строка, которая позволяет сориентироваться.
<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div> <!-- в коде это нижний элемент -->
</div>Строка, которая позволяет сориентироваться.
А
Б
А если нужен отступ сверху? Его совершает весь тёмный родительский блок от строки над ним.
<style type="text/css">
.temnyi { background-color: #666; height: 100px; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; margin: 30px -30px -30px 30px; }
.svetlyi2 { background-color: #fff; width: 250px; }
</style>
Строка, которая позволяет сориентироваться.
<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
</div>Строка, которая позволяет сориентироваться.
А
Б
Перед Блоком А добавим третий любой элемент, пусть даже пустой, но обладающий высотой, скажем, равной border. Тогда отступ будет рассчитываться от него
<style type="text/css">
.temnyi { background-color: #666; height: 100px; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; margin: 30px -30px -30px 30px; }
.svetlyi2 { background-color: #fff; width: 250px; }
</style>
Строка, которая позволяет сориентироваться.
<div class="temnyi">
<div style="border-bottom: 1px solid red;"></div>
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
</div>Строка, которая позволяет сориентироваться.
А
Б
Для того, чтобы содержимое блока А сделать не видимым, применим свойство position или transform (подробнее про позиционирование).
Встроенные элементы margin не смещает вниз и вверх (искл. при CSS позиционировании).
<style type="text/css">
.temnyi { background-color: #666; height: 100px; width:500px; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; margin: 30px -40px -30px 20px; }
.svetlyi2 { background-color: #fff; width: 250px; }
</style>
<div class="temnyi">
<span class="svetlyi2">Б</span><span class="svetlyi1">А</span><span class="svetlyi2">Б</span>
</div>
БАБ
Отправить комментарий