В каскадных таблицах стилей (CSS) элементы HTML-документа представляют собой прямоугольные блоки, об их отображении на веб-странице мы и поговорим в этой статье.
Давайте для начала познакомимся со структурой блока. Каждый блок состоит из содержимого элемента, отступа между содержимым и границей блока, самой границы блока, а также поля (расстояние от границы блока до другого элемента) блока. Для пояснения приведу рисунок
Каждое поле, граница и отступ блока состоит из четырех частей: верхней, правой, нижней и левой. Рассмотрим теперь свойства, определяющие их вид.
Свойства margin-top, margin-right, margin-bottom, margin-left задают ширину соответственно верхнего, правого, нижнего и левого полей блока. Задаваться поля могут любыми абсолютными величинами, поддерживаемыми CSS, например пикселями, в процентных значениях от родительского блока, а также можно использовать ключевое слово auto (о нем поговорим попозже). Например
div { margin-top:10px; margin-left: auto; margin-right: auto; margin-bottom:15px; }
margin:10px;
margin: 10px 20px;
margin:10px 20px 10px;
margin:10px 20px 10px 20px;
<html>
<head>
<title> Блочная модель документа</title>
<style>
div.b1 { background: #C0C0C0; }
div.b2 { background: #00FF80; }
</style>
</head>
<body>
<div class="b1">
Содержимое блока DIV.b1
</div>
<div class="b2">
Содержимое блока DIV.b2
</div>
</body>
</html>
Давайте блоку div.b1 добавим свойства margin-top и margin-bottom.
<html>
<head>
<title> Блочная модель документа</title>
<style>
div.b1 { background: #C0C0C0; margin-top:10px; margin-bottom:10px; }
div.b2 { background: #00FF80; }
</style>
</head>
<body>
<div class="b1">
Содержимое блока DIV.b1
</div>
<div class="b2">
Содержимое блока DIV.b2
</div>
</body>
</html>
Поля блока всегда прозрачны, то есть свойством background невозможно задать цвет или рисунок для фона полей.
Поэкспериментируйте со свойством margin - задайте свойства margin-left и margin-right, а также поменяйте величины полей.
Теперь давайте разберемся, что за загадочное значение такое auto. Тут нужно предупредить, что IE не понимает данное значение, его корректно обрабатывают браузеры Opera и Firefox. Значение auto можно использовать для выравнивания блоков на веб-странице. Например, нам нужно, чтобы блок div был посередине страницы. Для этого нужно написать
<html>
<head>
<title> Блочная модель документа</title>
<style>
div { background: #C0C0C0; margin-left: auto; margin-right: auto; height:50px; width:60%; }
</style>
</head>
<body>
<div>
Содержимое блока DIV
</div>
</body>
body { text-align: center; }
Свойства padding-top, padding-right, padding-bottom, padding-left задают ширину соответственно верхнего, правого, нижнего и левого отступов блока. Задаваться поля могут либо любыми абсолютными величинами, поддерживаемыми CSS, например пикселями, либо в процентных значениях от родительского блока. Например
p { padding-top:10px; padding-right:15px; padding-bottom:20px; padding-left:10px; }
div { padding:10px; }
p { padding:10px 15px; }
div { padding: 20px 15px 10px; }
div { padding: 20px 15px 10px 5px; }
<html>
<head>
<title> Блочная модель документа</title>
<style>
div.b1 { background: #C0C0C0; padding:10px;}
div.b2 { background: #00FF80; }
</style>
</head>
<body>
<div class="b1">
Содержимое блока DIV.b1
</div>
<div class="b2">
Содержимое блока DIV.b2
</div>
</body>
</html>
<title>Документ без названия</title>
</head>
<body style="margin:2px 2px">
<div style="padding:10px; width:300px; height:300px; background-color:#06C; margin-top:10px">
<div style="width:280px; height:280px; background-color:#0F6;">
</div>
</div>
</body>
</html>
<title>Документ без названия</title>
</head>
<body style="margin:2px 2px">
<div style=" width:300px; height:300px; background-color:#06C; margin-top:10px">
<div style="padding:10px;">
<div style="width:280px; height:280px; background-color:#0F6;">
</div>
</div>
</div>
</body>
</html>
думаю с этой статьи и нужно начинать изучение css