CSS маржа автоцентр с верхним краем - VALID?

Question

Это правильный CSS для центрирования div, а также для применения верхнего поля?

div {
     margin: 0 auto;
     margin-top: 30px;
     }

Answer 1

Используйте следующие поля для указания полей:

div { margin: 30px auto 0; }

Что является сокращением для:

div { margin : 30px auto 0 auto; } /* margin: [top] [right] [bottom] [left]; */

Что является сокращением для:

div {
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

Теперь, когда вы знаете, можно указать различные способы margin s и / или padding; выбор за вами.

Что касается приоритета, то будет применяться более позднее определение; как определено в спецификации .

Чтобы найти значение для комбинации элемент / свойство, пользовательские агенты должны применить следующий порядок сортировки:

1. Найдите все объявления, которые относятся к рассматриваемому элементу и свойству для целевого типа носителя. Объявления применяются, если связанный селектор соответствует рассматриваемому элементу.
2. Основной вид объявлений по весу и происхождению: для обычных объявлений таблицы стилей автора переопределяют таблицы стилей пользователя, которые переопределяют таблицу стилей по умолчанию. Для объявлений "! Important" таблицы стилей пользователя переопределяют таблицы стилей автора, которые переопределяют таблицу стилей по умолчанию. Декларация "Важные" переопределяет обычные объявления. Импортированная таблица стилей имеет то же происхождение, что и импортированная таблица стилей.
3. Вторичная сортировка зависит от специфики селектора: более специфичные селекторы переопределяют более общие. Псевдоэлементы и псевдоклассы считаются нормальными элементами и классами соответственно.
4. Наконец, сортировка по указанному порядку: если два правила имеют одинаковый вес, происхождение и специфику, последнее указанное выигрывает. Правила в импортированных таблицах стилей считаются предшествующими любым правилам в самой таблице стилей.

Помимо настройки «! Важно» в отдельных объявлениях, эта стратегия дает авторам больше стилей, чем у читателя. Поэтому важно, чтобы пользовательский агент давал пользователю возможность отключать влияние определенной таблицы стилей, например, через выпадающее меню.

Как уже упоминалось, вам, вероятно, потребуется указать фиксированную ширину, чтобы увидеть div по центру ...

Answer 2

да, но что касается центрирования div, вы также захотите применить width к нему.

Answer 3

Да.И они правы:

div { width: 90%; margin : 30px auto 0 auto; }

Я обычно использую ширину 90% в качестве хорошей отправной точки.

Answer 4

Да, это так, потому что поле: 0 авто устанавливает верхнюю и нижнюю часть на 0, а левое и правое - на автоматическое, поэтому установка верхней границы на 30px - это то же самое, что и маржа: 30px автоматическая 0 автоматическая;

Answer 5

Не понимаю, почему нет ... Вы также можете сократить это до:

div {margin: 30px auto 0;}

Answer 6

Да, это действительно.margin-top переопределит правило margin.

Хотя вы можете добавить width в центр.

Answer 7

Это действительно, но может быть короче так:

div {margin: 30px auto 0;}

Когда вы задаете только три значения, среднее значение применяется как к левой, так и к правой сторонам.