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 | Обновление: Ноябрь 2018

CSS размер границы CSS размеры элементов CSS размер таблицы