@Stas2021

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

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

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

Например, height:50%:
603bb1d742858798481023.jpeg

А для height:27%:
603bb22b98b5f285197056.jpeg

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

<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>
  • Вопрос задан
  • 108 просмотров
Пригласить эксперта
Ответы на вопрос 2
Не понял до конца вопроса, но есть два момента:

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы