Руководство CSS Margins
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
CSS Margin используется для создания пространства вокруг элемента, вне границ элемента.
По стандартному синтаксису, вам нужно предоставить 4 значения для margin:
/* Syntax: */
margin: top right bottom left;
/* Example: */
margin: 5px 20px 30px 40px;
Вместо того, чтобы предоставить 4 значения для CSS margin вы можете использовать 4 свойства (property) CSS margin-top, margin-right, margin-bottom, margin-left.
margin-top: 5px;
margin-right: 20px;
margin-bottom: 30px;
margin-right: 40px;
CSS margin так же принимает 1, 2 или 3 значения.
/* Apply to all four sides */
margin: 1em;
margin: -3px;
/* vertical | horizontal */
margin: 5px 10px;
/* top | horizontal | bottom */
margin: 10px 20px 30px;
Значения, которые можно дать CSS margin:
| auto | Браузер автоматически расчитает margin для элемента. |
| % | Определяет значение по % для margin, данное значение является % по отношению к ширине ближайшего предка элемента уровня блока (Block-level Element) содержащего текущий элемент. Смотрите так же объяснения в конце данной статьи. |
| px, cm, em,.. | Определить точное значение по единице px, cm, em,.. Например 10px, 2cm, 3em,... |
| inherit | Значение у margin будет унаследовано от родительского элемента. |
CSS margin принимает значение процента ( % ). Данное значение является процентом по отношению к ширине Containing Block. При этом, Containing Block является ближайшим элементом предком уровня блока ( block-level element) содержащим текущий элемент.
margin-percent-example.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding</title>
<meta charset="UTF-8"/>
<script>
function changeParentSize() {
var blockDiv = document.getElementById("blockDiv");
// offsetWidth = contentWidth + padding + border
var offsetWidth = blockDiv.offsetWidth;
if(offsetWidth > 300) {
offsetWidth = 200;
}
blockDiv.style.width = (offsetWidth+1) + "px";
}
</script>
</head>
<body>
<h3>CSS Margin Percentage</h3>
<div id="blockDiv" style="width:200px; height: 150px; border: 1px solid blue">
I am a div (Block-Level Element) <br/>
<span style="background-color: yellow;">
I am a span (Inline Element)
<div id= "redDiv" style="width:100px; margin:10%; border:1px solid red;">
width:100px; margin:10%;
</div>
</span>
</div>
<br/>
<button onClick="changeParentSize()">Change size of 'blockDiv'</button>
</body>
</html>
CSS margin принимает значение auto. Это хорошее решение когда вы хотите выровнять элементы по центру по горизонтали.
margin-auto-example.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin</title>
<meta charset="UTF-8"/>
<style>
.center-div {
width: 150px;
background-color: LightCyan;
padding:10px;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<h3>CSS Margin auto</h3>
<div class="center-div">
margin-left: auto; <br/>
margin-right: auto;
</div>
</body>
</html>
Примечание: CSS margin по вертикали (margin-top & margin-bottom) не влияет на строчный элемент (Inline Element). Например, <span> по умолчанию является строчным элементом, margin по вертикали не влияет на него.
margin-inline-element-example.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin</title>
<meta charset="UTF-8"/>
<style>
div {
background-color: yellow;
}
span {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 20px;
margin-right: 20px;
background-color: #eee;
}
</style>
</head>
<body>
<h3>CSS Margin for Inline Element</h3>
<div>I am a div</div>
<span>
I am a span.
margin-top: 100px;
margin-bottom: 100px;
margin-left: 20px;
margin-right: 20px;
</span>
<div>I am a div</div>
</body>
</html>
Если вы хотите чтобы margin по вертикали влиял на строчный элемент (Inline element) вам нужно превратить его в блочный элемент (Block-Level Element) или строчно-блочный элемент (Inline-block Element).
span {
display: block;
}
/* OR: */
span {
display: inline-block;
}
Нижнее и верхнее поля 2-х соседних блочных элементов (Block-level element) иногда объединяются друг с другом, образуя 1 единственное поле с наибольшим размером среди 2-х вышеуказанных полей. Данное действие называется схлапыванием полей (margin collapsing). Примечание: Схлапывание полей (margin collapsing) не происходит с элементами имеющими {float:left|right} или {position:absolute}.
Схлапывание полей (margin collapsing) с участием многих элементов:
margin-collapsing-example.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin Collapsing</title>
<meta charset="UTF-8"/>
<style>
div {
border:1px solid green;
}
button {
margin-top:10px;
}
</style>
<script>
function addDiv2MarginTop(delta) {
var div2 = document.getElementById("div2");
var style = window.getComputedStyle(div2);
var marginTopString = style.marginTop;// 20px
var marginTopInt = parseInt(marginTopString.substr(0,marginTopString.length-2)); // 20
var newMarginTopString = (marginTopInt + delta) + "px";
div2.style.marginTop = newMarginTopString;
div2.innerHTML = "height:50px; margin-top: " + newMarginTopString;
}
</script>
</head>
<body>
<h3>CSS Margin Collapsing</h3>
<div style="height:50px; margin-bottom:50px">
height:50px; margin-bottom:50px;
</div>
<div style="height:50px; margin-top:40px" id="div2">
height:50px; margin-top:40px
</div>
<button onClick="addDiv2MarginTop(3)">Div2 margin-top (+)</button>
<button onClick="addDiv2MarginTop(-3)">Div2 margin-top (-)</button>
</body>
</html>
Если 2 блочных элемента (block-level element) являются смежными, они вызывают схлапывание полей (Смотрите пример выше). Но если 2-ой элемент устанавливает CSS {float:left|right}, то не произойдет схлапывание.
floating-example.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin Collapsing</title>
<meta charset="UTF-8"/>
<style>
div {
border:1px solid green;
}
p {
color:red;
font-style:italic;
}
</style>
</head>
<body>
<h3>CSS Margin Collapsing</h3>
<p>Margin Collapsing does not work with {float:left|right}</p>
<div style="height:50px; margin-bottom:50px;">
height:50px; margin-bottom:50px;
</div>
<div style="height:50px; margin-top:40px; float:right" id="div2">
height:50px; margin-top:40px; float:right;
</div>
</body>
</html>
Родительский элемент и дочерние элементы.
Если родительский элемент не имеет border, padding, и первый дочерний элемент является блочным элементом (Block-level element) не имеющим {float:left|right}, то схлапывание полей (margin collapsing) произойдет с margin-top дочернего элемента и другого элемента за пределами родительского.
margin-collapsing-example2.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin Collapsing</title>
<meta charset="UTF-8"/>
<style>
div {
background: lavender;
}
p {
margin-top: 30px;
margin-left: 15px;
margin-right: 15px;
background: yellow;
height: 30px;
}
</style>
</head>
<body>
<h3>CSS Margin Collapsing (Parent and First Child)</h3>
<div style="margin-bottom:15px;">This is a div {margin-bottom: 15px;}</div>
<div style="min-height:50px;">
<p>
Child Paragraph 1 - margin-top: 30px;
</p>
<p>
Child Paragraph 2 - margin-top: 30px;
</p>
This parent element contains two paragraphs!
</div>
</body>
</html>
Если родительский элемент не имеет border, padding, и последний дочерний элемент являетсяя блочным элементом (Block-level element) без {float:left|right}, то схлапывание полей (margin collapsing) произойдет с margin-bottom данного дочернего элемент и другого элемента за пределами родительского.
margin-collapsing-example3.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin Collapsing</title>
<meta charset="UTF-8"/>
<style>
div {
background: lavender;
}
p {
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
background: yellow;
height: 30px;
}
</style>
</head>
<body>
<h3>CSS Margin Collapsing (Parent and last Child)</h3>
<div style="min-height:50px;">This parent element contains two paragraphs!
<p>
Child Paragraph 1 - margin-bottom: 30px;
</p>
<p>
Child Paragraph 2 - margin-bottom: 30px;
</p>
</div>
<div style="margin-top:15px;">This is a div {margin-top: 15px;}</div>
</body>
</html>
Пустой элемент.
Если элемент является пустым блоком, не имеющим border, padding, height, min-height, то его margin-top и margin-bottom схлопнутся (collapse) в значение.
empty-block-example.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin Collapsing</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>CSS Margin Collapsing (Empty block)</h3>
<div style="height:40px; background-color: yellow;">
height:40px;
</div>
<div style="margin-top:40px; margin-bottom:50px;">
<!-- This is Empty Block -->
<!-- No border, padding, height, min-height -->
</div>
<div style="height:50px; background-color: yellow;">
height:50px;
</div>
</body>
</html>
Дополнительные примечания:
Если учатствует отрицательный margin в схлапывании, то значение у использованного margin будет суммой наибольшей положительной margin и самой отрицательной margin.
*
