Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!

Если значение width элемента div изменится, изменится также и верхнее поле. Кажется странным? Считаем, что высота большинства элементов в нормальном потоке (как мы предполагаем) такова, чтобы вместить их элементов потомков, включая поля. Если верхнее и нижнее поля элемента задать как процент от высоты родителя, это может привести к бесконечному циклу: высота родителя увеличивалась бы, чтобы вместить верхнее и нижнее поля, которые затем должны были бы увеличиться соответственно новой высоте и т. д.Eric A. Meyer «Cascading Style Sheets: The Definitive Guide»
Вместо того чтобы просто игнорировать процентные значения для верхнего и нижнего полей, авторы спецификации решили соотнести их с шириной родительского элемента, которая не меняется в зависимости от ширины его потомков.
Обработка процентных значений для верхнего и нижнего полей
абсолютно позиционированных элементов отличается и более
подробно рассмотрена в главе 10.
Видя, когда новички верстая страницу за страницей, допускают кучу ошибок, делая поля (margin) и до конца не понимая, как эти самые поля на самом деле работают, я решил написать данную статью.
А в целом, отличная статья, уяснил для себя пару моментов, спасибо
<style>
div {
height:200px;
width: 200px;
position: absolute;
background: rgba(0,0,0,0.3);
font: 15px Arial;
}
.a {top: 7px; left: 135px;}
.b {top: 47px; left: 13px;}
.c {top: 104px; left: 188px;}
.zashibis {
background: transparent;
color: yellow;
font: bold 40px Arial;
top: 148px;
left: 90px;
text-shadow: 5px 5px 20px rgba(0,0,0,0.9);
}
</style>
<div class="a">Проверка</div>
<div class="b">Проверка</div>
<div class="c">Проверка</div>
<div class="zashibis">Зашибись</div>
<style>
.a, .b, .c, .d {
height:100%;
display: inline-block;
}
.a {background: #7CAFE7; width: 5%;}
.b {background: #E7897C; width: 10%;}
.c {background: #ABE77C; width: 20%;}
.d {background: #D37CE7; width: 40%;}
.parent {height: 800px;}
</style>
<div class="parent">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="c"></div>
<div class="d"></div>
.a, .b, .c, .d {
float:left;
display:-moz-inline-box;
...
<div style="position: absolute; width: 200px; height: 200px; left: 0; top: 20px; background: #000; opacity: 0.3; z-index: по вкусу;">
<label>Проверка</label>
</div>
...
#CenterBlock{
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin:-200px 0 0 -200px;
}
Если маргины одноименные( оба маргина или отрицательное или положительное число ), то в таком случае берется большое число по модулю, а меньшее не учитывается.
Поговорим о margin, он же маргин( часть 1-я )