Современные CSS уроки

CSS размеры элементов

Урок 17. CSS размеры элементов страницы

CSS атрибуты и значения, определяющие размеры

Определяем размер элементов страницы:

<title>Зададим размеры в CSS разметке</title>
<style type="text/css">
div { color: White }
#container {
width: 606px;
height: 150px;
margin: 0 auto;
padding: 0;
background-color: Gray
}
.first_block {
float: left;
padding: 15px;
margin: 20px;
width: 130px;
height: 80px;
border-left: 2px solid #555555;
background-color: LimeGreen
}
.second_block {
float: left;
padding: 15px;
margin: 20px;
width: 130px;
height: 80px;
border-left: 2px solid #555555;
background-color: Red
}
.third_block {
float: left;
padding: 15px;
margin: 20px;
width: 130px;
height: 80px;
border-left: 2px solid #555555;
background-color: Blue
}
</style>
</head>
<body>
<div id="container">
<div class="first_block">Первый блок</div>
<div class="second_block">Второй блок</div>
<div class="third_block">Третий блок</div>
</div>

Результат: CSS размеры элементов

div {color: White} определяет цвет текста всех блоков <div> </div>. Ширина контейнера с серым фоном была вычислена следующим образом: 606px = 2px + 20px + 15px + 130px + 15px + 20px + 2px + 20px + 15px + 130px + 15px + 20px + 2px + 20px + 15px + 130px + 15px + 20px, то есть были учтены размеры внешних и внутренних полей, границ + размеры блоков, входящих в состав <div id="container">. Если к величине, описывающей ширину первого, второго или третьего блока прибавить 1 пиксел – выпадет синий div. Атрибут margin: со значениями 0 auto определяет центрирование блока по горизонтали. Посмотрите еще раз на результат. Отступ от верхней границы web-страницы установлен по умолчанию. Такие отступы определены по всему периметру окна браузера. Чтобы от них избавиться, достаточно в стилевых описаниях селектору body назначить margin:0; padding:0.

float – атрибут позиционирования (смотрите урок по позиционированию).

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 16. CSS границы   CSS размеры элементов   Урок 18. CSS таблицы

    Сохранить в сервисы и закладки