Урок 12. Конфликты полей

Здравствуй, уважаемый читатель.

Это двенадцатый урок изучения CSS. Сегодня мы рассмотрим важную часть CSS как конфликты полей. При верстке шаблона если не знать данные правила может возникнуть ситуация, когда вроде делаешь всё правильно, но отображается не совсем так как желаешь. Для этого необходимо всегда знать какие конфликты полей могут быть.

Перед изучением данного урока пройдите предыдущие уроки:

Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков
Урок 9. Наследование
Урок 10. Блочная модель
Урок 11. Высота и ширина блока

Теория и практика

С данными особенностями CSS вам также предстоит столкнуться, если вы будете иметь дело с версткой шаблона для своего сайта.

Первый конфликт полей

Приступим. В CSS пропишем блок <div> и тег <p>:

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content1">
        Текст 1
    </div>
    <div id="content2">
        Текст 2
    </div>	
</body>
</html>

А в CSS уберем все отступы, которые дают браузеры:

#content1{
    margin:0;
    padding:0;
}
 
#content2{
    margin:0;
    padding:0;
}

Сейчас зададим для блока <div id="content1"> нижний отступ в 40 пикселей(px):

#content1{
    margin:0 0 40px 0;
    padding:0;
}
 
#content2{
    margin:0;
    padding:0;
}

Как это выглядит в браузере:

Сейчас добавим для <div id="content2"> отступ сверху в 30 пикселей(px):

#content1{
    margin:0 0 40px 0;
    padding:0;
}
 
#content2{
    margin:30px 0 0 0;
    padding:0;
}

Проверим изменения в браузере:

Как видите ничего не изменилось, хотя по логике верхний и нижний отступ должны были суммироваться, но этого не произошло. Это и есть первый конфликт полей. То есть браузер выбирает большее из значений и его использует!

Второй конфликт полей

Для примера возьмем предыдущий пример html страницы и блок <div id="content2"> поместим внутрь блока <div id="content1">:

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content1">
        <div id="content2">
            Текст
        </div>
    </div>
</body>
</html>

А в CSS сразу пропишем:

#content1{
    margin:30px 0 0 0;
    padding:0;
}
 
#content2{
    margin:30px 0 0 0;
    padding:0;
}

Что у нас должно получиться: заданы два верхних отступа, т. е. блок <div id="content1"> должен отступать от верха на 30 пикселей(px), в то же время еще и блок <div id="content2"> должен отступать внутри блока <div id="content1"> на 30 пикселей(px). Проверим наш код выглядит в браузере:

Как видите мы не видим то, что по логике должны были увидеть. Это происходит из-за второго конфликта полей. Но данный конфликт полей имеет решение: необходимо задать границы для данных блоков:

#content1{
    margin:30px 0 0 0;
    padding:0;
    border:1px solid #cc0000;
}
 
#content2{
    margin:30px 0 0 0;
    padding:0;
    border:1px solid #cccccc;
}

Как сейчас выглядит в браузере:

Данный материал понятен не сразу. Но достаточно того что вы хотя бы прочтете данную статью и при необходимости(например при верстке шаблона) вернетесь к ней и тогда будет намного легче понять о чем здесь я хотел сказать. На этом всё.