Уроки HTML, уроки CSS
CSS уроки margin, padding, border
Урок 6. Поля и границы

Пример с атрибутами margin и padding (внешние и внутренние поля):

Внешнее поле элемента (margin) – это пространство за пределами границы (border) элемента. Внутреннее поле (padding) – это пространство между границей элемента и его содержимым.

Код:

<head>
<style type="text/css">
body {
margin: 0;
padding: 0
}
.mbp {
margin: 55px;
border: 1px solid #0066ff;
padding: 45px;
}
</style>
</head>
<body>
<div class="mbp">Единственный урок, который можно извлечь из истории, состоит в том, что люди не извлекают из истории никаких уроков
<blockquote>Шоу Джордж Бернард (1856-1950)</blockquote>
</div>
</body>

В самом начале отменяем, установленные по умолчанию, поля документа. Далее займемся описанием блока: margin: 60px; – определяет ширину внешнего поля блока; padding: 40px; – ширина внутреннего поля; border: 1px solid #ff0000; – создает границу.

Атрибут margin соединяет в себе: margin-top, margin-right, margin-bottom, margin-left, – часто используется такая запись: margin: 60px 60px 60px 60px;, – где первое значение соответствует margin-top, второе – margin-right, третье – margin-bottom, а четвертое – margin-left. border также объединяет четыре атрибута: border:top, border-right, border-bottom, border-left.

Разберем подробно строчку border: 1px solid #ff0000;: первое значение задает толшину в 1 пиксел, solid – говорит о том, что граница состоит из сплошных линий, #ff0000 – цвет.

border

Пример:

<head>
<style type="text/css">
.punktir {
width: 250px;
height: 180px;
border-top: 3px dashed Blue;
border-right: 5px dotted DeepSkyBlue;
border-bottom: 3px solid DarkBlue;
border-left: 5px dotted DarkOrange
}
</style>
</head>
<body>
<div class="punktir"> &nbsp; </div>
</body>

Значение dashed – создает пунктирную границу, dotted – точечную.

Результат

Размеры

Пример:

<head>
<style type="text/css">
div { color: White }
#container {
width: 606px;
height: 150px;
margin: 0 auto;
padding: 0;
background-color: Gray
}
.first_block {
float: left;
padding: 15px;
margin: 20px;
width: 130px;
height: 80px;
border-left: 2px solid #ffffff;
background-color: LimeGreen
}
.second_block {
float: left;
padding: 15px;
margin: 20px;
width: 130px;
height: 80px;
border-left: 2px solid #ffffff;
background-color: Red
}
.third_block {
float: left;
padding: 15px;
margin: 20px;
width: 130px;
height: 80px;
border-left: 2px solid #ffffff;
background-color: Blue
}
</style>
</head>
<body>
<div id="container">
<div class="first_block">Первый блок
</div>
<div class="second_block">Второй блок
</div>
<div class="third_block">Третий блок
</div>
</div>
</body>

Результат

div {color: White} – задает цвет текста для всех <div> </div>. Ширина контейнера с серым фоном была вычислена таким образом: 606px = 2px + 20px + 15px + 130px + 15px + 20px + 2px + 20px + 15px + 130px + 15px + 20px + 2px + 20px + 15px + 130px + 15px + 20px, то есть были учтены внешние и внутренние поля, границы и ширины полезного пространства блоков, входящих в <div id="container">. Если в исходном коде к любой величине, описывающей первый, второй или третий блоки (кроме величин атрибутов height), прибавить 1 пиксел, – выпадет синий div. Атрибут со значениями margin: 0 auto; – выравнивает <div id="container"> горизонтально, по центру страницы. Посмотрите еще раз на результат, – отступ от верхней границы документа задан по умолчанию, такие поля определены по всему периметру окна браузера. Чтобы от них избавиться, достаточно в стилевых описаниях селектору body назначить margin: 0; padding: 0.

float – атрибут позиционирования, подробно рассматривается в следующей главе.

Табличная рамка

Пример:

<head>
<style type="text/css">
.t_example {
background-color: #cccccc;
width: 400px
}
.t_example tr {
background-color: #ffffff;
height: 100px
}
</style>
</head>
<body>
<table border="0" cellSpacing="1" class="t_example">
<tr>
<td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td>
</tr>
<tr>
<td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td>
</tr>
</table>
</body>

Результат

Отметьте, что рамка создана не атрибутом border="", а с помощью background-color: и cellSpacing="", при этом ее толщина прямо пропорциональна значению cellSpacing="", а цвет зависит от фона.

В итоге мы имеем более реалистичную таблицу, которая выглядит одинаково во всех браузерах.

Дата публикации: Октябрь 2009 | Обновление: Декабрь 2009

Урок 5. Фон   Урок 6   Урок 7. Списки