CSS свойство margin
Следующее css свойство, которое мы сегодня изучим, называется margin. При помощи него мы можем задавать отступы для элементов. Данное свойство применяется также часто, как и свойство padding, а также является таким же важным. Отступом является расстояние от края элемента, которому задается отступ, до края элемента его родителя. Естественно Вы, наверное, ничего из этого не поняли, и поэтому я покажу Вам пример использования CSS свойства margin.
<html>
<head>
<title>Задание отступов</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="parent">
<div class="child_1">Блок 1</div>
<div class="child_2">Блок 2</div>
</div>
</body>
</html>
Применяем CSS стили, в которых зададим отступы для двух дочерних блоков:
.parent {
background: #f00;
border: 1px solid #000;
width: 200px;
height: 300px;
}
.child_1 {
background: #0f0;
border: 1px solid #000;
margin: 20px;
width: 50px;
height: 50px;
}
.child_2 {
background: #00f;
border: 1px solid #000;
margin: 70px 0px 0px 100px;
width: 50px;
height: 70px;
}
Мы написали код, в котором создали родительский блок, и внутри родительского блока создали два дочерних блока. Для родительского и дочерних блоков мы задаем фоновый цвет, рамку, а также фиксированную ширину, для того чтобы отчетливо видеть блоки. А также для дочерних блоков задаем отступы при помощи CSS свойства margin. В результате мы получаем следующий результат.
Первое изображение - это получившийся результат. На втором изображении мы видим отступы margin для первого дочернего блока, которые выделены желтым цветом. И на третьем изображении выделены отступы для второго дочернего блока. Для первого блока мы задали отступ в двадцать пикселей со всех сторон. Т.к., блок является дочерним для блока parent, отступы задаются от края дочернего блока и до края родителя, посмотрев на рисунок, Вы это поймете. Такая же ситуация и со вторым блоком. Значения отступов задаются таким же образом, как и для полей, по часовой стрелке, начиная сверху, а также могут принимать отрицательные значения. Если задать отрицательное значение для блока child_2, то можно им перекрыть первый блок. Вообще об отступах можно говорить еще довольно долго, но лучше с ними экспериментировать, и практиковаться. Ведь всем известно, что при помощи практики Вы лучше всего сможете усвоить любой материал, разобраться и добиться успеха!
