Разные значения свойства margin

Question

Вопрос

Какая разница между значениями 0 и auto в свойстве margin? Приведите примеры.

Answer 1

Ответ

В вертикальных полях, auto всегда означает 0. В горизонтальных полях, auto означает 0 только тогда, если свойство width также auto.
Для данного HTML:


<html>
    <body>
        <p></p>
    </body>
</html>

Пример 1: auto свойство width.


body { width: 30em; }
p { width:auto; margin-left:auto; margin-right:auto; }

Из того, что свойство width auto, поля будут нулевыми. Ширина p тогда будет 30em, без полей.

Пример 2: два auto поля


body { width: 30em; }
p { width: 20em; margin-left: auto; margin-right: auto; }

Ширина p 20em и оставшиеся 10em будут поделены между правым и левым полями по 5em.

Пример 3: одно auto поле


body { width: 30em; }
p { width: 20em; margin-left: 2em; margin-right: auto; }

В этом случае, ширина параграфа p 20em и поле слева 2em. Поскольку общая длина 30em правое поле будет 8em.
Имейте ввиду, что значение width по-умолчанию равно auto, поэтому установка полей в auto имеет смысл, если только устанавливается width в что-то отличное от auto.

Разные значения свойства margin

Автор: art ← к списку ← →