Может кто-нибудь придумать причину, почему эти два способа написания одного и того же кода вызывают проблемы? (очень быстрый) - PullRequest
Новая
       1

Может кто-нибудь придумать причину, почему эти два способа написания одного и того же кода вызывают проблемы? (очень быстрый)

0 голосов
/ 12 марта 2012

Я делаю контейнер с именем "fullWidthContainer", чтобы поместить в него все мои статьи и всякую ерунду.Он должен располагаться на расстоянии от верхнего и нижнего колонтитулов, поэтому я добавил отступ в 40 пикселей сверху и снизу.

HTML-код: 

<div id="fullWidthContainer class="cAlign">
...
</div>

CSS: 

div#fullWidthContainer
{
margin: 40px 0 40px 0;
}


.cAlign { width: 960px; margin: 0 auto; }

Это приводит к тому, что все содержимое внутри не выравнивается по центру.Все загнано и выровнено влево.

Если я введу вышеуказанный код CSS таким образом ....: 

div#fullWidthContainer
{
    margin-top: 40px;
    margin-bottom: 40px;
}

.cAlign { width: 960px; margin: 0, auto; }

, тогда он будет работать нормально.Почему это?Разве это не означает то же самое?Я чувствую, что это что-то очень простое, что я пропустил ....

Ответы [ 3 ]

2 голосов
/ 12 марта 2012

Я думаю, это потому, что ваши поля слева и справа не равны нулю.В первом коде вы устанавливаете их в 0px.Во втором вы их не трогаете.

2 голосов
/ 12 марта 2012

div#fullWidthContainer имеет более высокую специфичность , чем .cAlign, поэтому он переопределяет ее.

Итак, в первом примере margin: 0 auto из .cAlign переопределяется на margin: 40px 0 40px 0 в div#fullWidthContainer.

Второй пример не устанавливает левое и правое поле в div#fullWidthContainer, поэтому значение auto из .cAlign не переопределяется.

Как уже упоминалось, в коде есть несколько опечаток. margin: 0, auto должно быть margin: 0 auto (без запятой), а <div id="fullWidthContainer должно быть <div id="fullWidthContainer" (с закрывающей кавычкой для значения атрибута).

0 голосов
/ 12 марта 2012

Нет, ни одно из этих изменений не приводит к тому, что CSS "означает то же самое".

В случае div#fullWidthContainer первый пример кода устанавливает margin-left и margin-right в 0, а второй пример кода оставляет их без изменений.

В случае .cAlign первый пример кода устанавливает margin-top и margin-bottom в 0 и margin-left и margin-right в auto, тогда как второй пример кода содержит синтаксическую ошибку (запятая не принадлежит) и, по идее, ничего не должен делать (хотя на практике я могу понять, что браузер разбирает 0, как 0 и позволяет ему скользить).

Тогда, поскольку оба селектора применяются к рассматриваемому div, приоритет вступает в игру. div#fullWidthContainer является более конкретным, чем .cAlign, потому что он выбирает идентификатор, поэтому в первом случае значения margin-left и margin-right из div#fullWidthContainer переопределяют значения из .cAlign, поэтому вы получаете поля 0 вместо из auto.

...