Пример 4. Высота слоя

75 76 77 78 79 80 81

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Высота</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

#layer1 {

width: 300px;/* Ширина слоя */

background: #fc0; /* Цвет фона */

height: 50px; /* Высота слоя */

padding: 5px; /* Поля вокруг текста */

}

</style>
</head>
<body>
<div id="layer1">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

</div>
</body>
</html>

Результат данного примера продемонстрирован на рисунке.

а. Internet Explorer

б. Firefox

Высота блока в разных браузерах

Видно, что Internet Exporer увеличивает высоту слоя, подстраивая ее под содержимое, а Firefox (и Opera) оставляет высоту неизменной, за счет чего текст не помещается в блоке и накладывается поверх слоя.

Цвет фона

Цвет фона элемента проще всего устанавливать через универсальный параметр background. Фоном при этом заливается область, которая определяется значениями атрибутов width, height и padding.

Область слоя, которая заполняется фоновым цветом

Таким образом, margin не принимает участия в формировании цветной области.

Границы

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