Теперь давайте посмотрим, что происходит, когда значение auto задано для двух из трех свойств (width, margin-left или margin-right). Если оба поля имеют значение auto, как показано в приведенном ниже коде, для них устанавливается одинаковая длина. Таким образом, происходит центрирование элемента в рамках его родительского элемента:
p {width: 100px; margin-left: auto; margin-right: auto;}
Назначение для обоих полей одинаковой длины – надежный способ центрирования элемента, чего нельзя сказать о применении свойства text-align. (Свойство text-align применяется только к строковому содержимому блочного элемента, поэтому если определить для элемента свойство text-align со значением center, он не будет центрирован.)
На практике только броузеры, выпущенные после февраля 1999 года, правильно обрабатывают центрирование поля с шириной auto, и не все они делают это абсолютно верно. Поведение тех броузеров, которые неправильно обрабатывают поля auto, непредсказуемо, и самый безопасный вариант – если они будут задавать для обоих полей нулевое значение. Теперь посмотрим, как будут вычислены размеры элементов, если присвоить значение auto одному из полей и ширине. Поле со значением auto обращается в нуль:
p {margin-left: auto; margin-right: 100px;
width: auto;} /* поле слева обращается в 0 */
Затем width присваивается значение, необходимое, чтобы элемент заполнил свой контейнер. Наконец, что происходит, если значение auto присвоено всем трем свойствам? Ответ прост: оба поля обращаются в нуль, а ширина становится максимальной. Это аналогично стандартной ситуации, когда значения полей или ширины явно не заданы. В этом случае по умолчанию поля становятся нулевыми, а ширине присваивается значение auto. Заметьте, что поскольку горизонтальные поля не сворачиваются, отступы, рамки и поля родительского элемента могут оказывать влияние на дочерние элементы. Это влияние косвенное и проявляется в том, что поля (и т. д.) элемента могут вызывать смещение дочерних элементов:
div {padding: 30px; background: silver;}
p {margin: 20px; padding: 0; background: white;}