Как chrome рассчитывает margin:auto?

Question

[Stanislav]

Добрый день, форумчане!

Столкнулся с непонятной ситуацией - два блока, один в другом. Первый - relative, второй - absolute с margin:auto. В зависимости от высоты второго блока chrome либо устанавливает (рассчитывает) одинаковый margin сверху и снизу либо считает, что margin разный.

Например, height:50%:


А для height:27%:


Разница конечно небольшая, но она есть.
Непонятно, почему блок себя так ведет?
Спасибо!

<style>
*{margin:0;padding:0;}
body, html {width:100%;height:100%;}

#q1{
background-color:#0066CC;
position:relative;
height:100%;
width:100%;
}

#q2{
position:absolute;
height:50%;
width:100%;
top:0;
bottom:0;
margin:auto;
background-color:#3399CC;
}

</style>

<div id="q1">
<div id="q2"></div>
</div>

Answer 1

[Роман Якимчук]

Не понял до конца вопроса, но есть два момента:

1. Не совмещайте top и bottom с margin (top & bottom) для абсолютных элементов, потому что это решение одной задачи разными способами, и, честно говоря, даже не знаю как себя поведет браузер

2. margin: auto берет контейнер в котором размещается элемент, и "центрует" его путем добавления margin по разные стороны элемента в равной доле, поэтому для ваших 27% margin вышел больше, чем для большей высоты самого элемента. Но опять же, странное дело, потому что для абсолюта + top & bottom он должен был по идее растянуть его во весь экран, а не делать margin.

Это мысли вслух, может быть чем-нибудь поможет.

Answer 2

[Stanislav]

Спасибо!
Вопрос в том, что при 50% margin сверху и снизу одинаковый (например, по 326.500). При 27% - разный (сверху 476.688, снизу 476.703).

Comments

[theuser]

Тут и 27% высоты браузер не правильно посчитал в пикселях.
Самый цимус в том, что если js'ом посмотреть какая высота document.getElementById("q2").offsetHeight, то там будет другое значение. Видится мне, что это косяк в расчетах в рамках девтула.

[Stanislav]

Спасибо! Точно! Высота для 27% должна была быть 352.62 вместо 352.609