Здравствуйте!
Подскажите, пожалуйста, почему при применении margin: auto; к блоку, который один на странице, как в 11 уроке темы о блочной модели, к примеру, не применяется вертикальный марджин?
То есть, блок становится посередине по горизонтали, но так как я указываю одно значение, то оно должно действовать для всех четырех сторон
Если я поставлю такому блоку margin-top, то отступ сверху появляется.
Появляется ощущение, что это конкретная особенность свойства auto.
Объясните, если кто-то в курсе
Да, так работает свойство margin. В отличии от padding, у него в обычной блочной модели есть некоторые особенности:
- margin-top выпадает из родительского элемента. Но если родителю задать padding или border, даже в 1px, то выпадания не будет.
- Если выше элемента с margin-top будет располагаться элемент с margin-bottom, то они НЕ суммируются. Расстояние между этими элементами будет равно большему из полей. К примеру, если у одного 50px, а у другого 70px, то расстояние будет равно 70px.
margin: auto центрует элемент не только по горизонтали, но и по вертикали, только если назначить родительский блок флекс-контейнером. Но до этого раздела в курсах Вы еще не дошли.
margin: auto; отказывается работать для вертикального центрирования. Если почитать в спецификации w3, то там говорится, если margin-top и margin-bottom установлены на auto, их значение равно 0.
Расположить блок по центру, как один из вариантов, можно с помощью абсолютного центрирования:
.block {
margin: auto;
height: 100px; <---- нужно указать высоту
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Спасибо за ответы