CSS margin или пространство за границами элемента

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

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

Атрибут 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>

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

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

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

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

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

Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS позиции фона Пространство CSS margin Пространство CSS padding