Отрицательные значения внешних полей в CSS

Поля в CSS означают свободные расстояния между элементами страницы. Отрицательное значение делает наоборот, то есть она позволяет, чтобы какой-то элемент выходил из рамки блока, в котором он находится или если два блока находятся близко друг к другу, вертикально, то если мы задаем отрицательное значение первому блоку, то второй блок закрывает первого на то расстояние, которое указанно в отрицательной значений. Рассмотрим этот случай на примере. И так у нас есть страница, в нее есть 2 блока и они расположены вертикально. Смотрим на код страницы:

<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8" />
        <title>Главная страница</title>
        <style type ="text/css">
            #first_block{
                background-color: #FFDD00;
                height: 100px;
            }

            #the_second_block{
                background-color: #FF0000;
                height: 100px;
                width: 940px;
            }
        </style>
    </head>
    <body>
        <div id="first_block"></div>
        <div id="the_second_block"></div>
    </body>
</html>

Смотрим как страница отображается в браузере:

Теперь зададим отрицательный нижний отступ для желтого блока, у него идентификатор с именем #first_block.

#first_block{
    background-color: #FFDD00;
    height: 100px;
    margin-bottom: -45px;
}

Сохраняем и смотрим что изменилось:

Как я писал выше, второй блок поднялся над первым блоком из за того что первому блоку задана отрицательное значение нижнего внешнего поля. Эту фишку не надо использовать часто, т.к. в некоторых случаях, к сожалению, браузеры не интерпретирует страницу правильно. И тут я вспомнил про осела ( так дизайнеры называют браузера Internet Explorer ) он всегда создает проблемы в разных случаях. И его все недолюбливают за этих проблем. Но и для него всегда найдется решение – хорошие дизайнеры обязаны это знать.

Специальные стили для браузера IE (Internet Explorer)

Браузер IE часто не интерпретирует правильно некоторые стили, отступы и др. Компания Microsoft осознает, что IE не самый успешный продукт, которого они создали – только по этой причине, они с самого начала встроили одно свойство через которой можно написать отдельные стили css специально для IE. Стили должны быть встроенными. Они задаются в области header, внутри блока <style type=”text/css”> СТИЛИ </style>, для определённой страницы. Эти стили интерпретируется только браузером IE, остальные браузеры интерпретируют эти свойства как комментарии. Вот пример использования стилей для IE.

<!--[ if IE6 ]>
    <style type="text/css">
        body {
            position:relative;
        }
    </style>
<![endif]-->

Если версия IE равна 6, то для тега body задается относительное позиционирование.

Вот, пожалуй, и все что я вам хотел рассказать об отрицательных значений внешнего поля margin и как использовать специальные стили для браузера IE.

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

%next_previous_article%

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в: