CSS: Урок 12. CSS margin – пространство за границами элемента

Суббота, 18 Декабря 2010 г. 15:12 + в цитатник

CSS атрибуты и значения, определяющие margin элемента

Ниже схематически показано пространство, которое занимает атрибут margin:

Схему см. здесь

Атрибут margin определяет пространство за пределами границы элемента.

Код примера:

                                  <head>

            <style type="text/css">

            body {

            margin: 0;

            padding: 0

            } 

            .m {

            margin: 55px;

            border: 1px solid #f25100;

            padding: 45px;

            }

            </style>

                              </head>

            <body>

            <div class="m">Единственный урок, который можно извлечь из истории, состоит в том, что люди не извлекают из истории никаких уроков

            <blockquote>Шоу Джордж Бернард (1856-1950)</blockquote>

            </div>

            </body>

Атрибуты и значения

body {margin:0; padding:0} – отменяет внешние и внутренние поля документа, которые устанавливаются по умолчанию.
margin:55px – определяет ширину внешнего поля блока по перимeтру.
padding:45px – определяет ширину внутреннего поля блока.
border:1px solid #f25100 – определяет свойства границы блока.

Атрибут margin соединяет в себе:

margin-top
margin-right
margin-bottom
margin-left

Часто используется такая запись: margin: 20px 50px 30px 50px, где первое значение соответствует margin-top, второе – margin-right, третье – margin-bottom, а четвертое – margin-left (по часовой стрелке, начиная сверху).

ab-w.net

Рубрики:

Полезное
Уроки CSS