Свойство CSS margin

Свойство CSS margin отвечает за задание внешних отступов элемента от других объектов.

Синтаксис CSS margin

margin: top right bottom left;

Где:

  • top – отступ сверху от других элементов;
  • right – отступ справа от других элементов;
  • bottom – отступ снизу от других элементов;
  • left – отступ слева от других элементов;

Значения чаще всего задаются в пикселях. Допускается также задание в виде процентов и других допустимых единицах CSS.

Примечание 1

Допускается задание не четырех значений. В зависимости от количества значений действия будут разные:

  • Если задано 3 значения, то первое значение устанавливает отступ сверху, второе — одновременно слева и справа, а третье — снизу
  • Если задано 2 значения, то первое значение устанавливает отступ сверху и снизу, второе — слева и справа от содержимого
  • Если задано 1 значение, то отступ задается одинаковый отступ для всех сторон. Например:

margin: 7px 7px 7px 7px;
Можно задать компактнее:
margin: 7px;

Примечание 2

В отличии от свойства CSS padding, margin допускает отрицательные значения.

Также у margin есть 4 отдельных свойства CSS. Каждое из них отвечает за какое-то направление.

  • margin-left – отступ от левой границы элемента;
  • margin-right – отступ от правой границы элемента;
  • margin-top – отступ от верхней границы элемента;
  • margin-bottom – отступ от левой границы элемента;

Например

margin: 3px 5px 7px 10px;
Или можно задать подробно:
margin-left: 10px;
margin-right: 5px;
margin-top: 3px;
margin-bottom: 7px;

Свойство CSS margin используется практически постоянно. Отступы играют важнейшую роль в оформлении html страницы. Приведем примеры





Примеры с разными отступами от других элементов

Пример 1. Положительные отступы внутри тега <div>

<html>
<head>
<style>
.block1{
width: 250px;
height: 250px;
border: 1px dotted #000;
background: #228B22;
}
.margin1{
width: 100px;
height: 100px;
border: 2px dotted #000;
margin: 10px 0px 0px 40px;
background: #7FFF00;
}
</style>
</head>
<body>
<div class="block1">
<div class="margin1"></div>
</div>
</body>
</html>

Вот как это выглядит на странице:

Пример 2. Отрицательные отступы внутри тега <div>

<html>
<head>
<style>
.block1{
width: 250px;
height: 250px;
border: 1px dotted #000;
background: #228B22;
}
.margin1{
width: 100px;
height: 100px;
border: 2px dotted #000;
margin: -20px 0px 0px 40px;
background: #7FFF00;
}
</style>
</head>
<body>
<div class="block1">
<div class="margin1"></div>
</div>
</body>
</html>

Вот как это выглядит на странице:

Для обращения к margin из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.margin="VALUE"




Читайте также:

• Свойство css border

• Свойство css background

• Свойство css transition

• Свойство text-decoration

• Свойство vertical-align

• Свойство white-space

• Свойство word-wrap

• Свойство z-index

• Линейный градиент

• Радиальный градиент


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.