Уроки CSS. Элементы margin, padding, border (Каскадные таблицы стилей)

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. Списки