Ответ 1
Это классический и важный вопрос.
Элементы могут быть либо встроенными (что означает, что все они сидят рядом друг с другом - как тег span), либо они могут быть блоком (что означает, что стек вверх друг на друга - как тег div).
Маржа: автоматически, в то время как немного странно, когда вы впервые видите это, это лучший и единственный способ центрировать уровень блока (положение статический), элемент.
Для всего, что отображается: inline (например, тег span) - единственный способ центрировать его, если вы указываете text-align: center на родительском. Это центрирует все отображение: встроенное внутри него положение: статическое;
Дисплей: встроенный блок является гибридом двух, которые являются относительно новыми (но поддерживаются еще в 7-м случае, если вы используете хак, упомянутый в другом ответе). С встроенным блоком вы получаете преимущества встроенного интерфейса, поскольку вы можете приклеить кучу вещей рядом друг с другом и сосредоточить их на всех (подумайте о навигаторе, где все навигационные элементы центрированы), но ТАКЖЕ имеют каждый элемент воспользуется некоторыми материалами, которые вы получаете с дисплеем: block - самый важный из которых - HEIGHT.
Представьте сценарий, в котором каждый элемент навигации имеет фоновое изображение высотой 80 пикселей - вы не можете сделать встроенный элемент высотой 80 - так что вам нужно будет отображать каждый элемент: block - только тогда вы можете дайте ему высоту. Поэтому, чтобы все они появлялись рядом друг с другом, вы их плавали. Проблема в том, что если вы их плаваете, вы не можете сосредоточить их на странице, если не указать фиксированную ширину навигатора и поля: auto THAT. Это означает, что nav имеет фиксированную ширину - может быть, все в порядке, но бывают случаи, когда навигация должна иметь динамические элементы, разную ширину для разных языков и т.д.
Введите отображение: встроенный блок.