Современные уроки CSS

CSS margin (внешнее поле)

Урок 14. CSS margin или поля за границами элемента

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

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

margin css

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

Код примера:

<head>
<title>CSS margin или внешнее поле элемента</title>
<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>
</html>

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



CSS margin соединяет в себе параметры:

  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left

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

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

Урок 13. CSS фиксирование фона   CSS margin   Урок 15. CSS padding

    Сохранить в сервисы и закладки