Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

Ширина и высота блоков CSS

По умолчанию высота и ширина блока зависит от содержимого : текста, картинок и т.д.
С помощью CSS эти параметры можно настраивать. В основном для блоков применяется элемент <div>, но можно и любой другой.

height

Определяет высоту блока в пикселях.

width

Определяет ширину блока в пикселях.

Пример, создадим класс в CSS (селектор для классов) :

.news {
height: 150px;
width: 600px;
background: #BEE8F5;}

И применим новый класс под названием news в HTML к элементу <div>:

<div class="news"> текст на странице........ </div>

Получим вот что:

Можно задавать один из параметров, допустим ширину блока. Тогда текст будет написан на фиксированную ширину блока, а высота блока будет зависеть от количества текста в блоке.
Пример в CSS:

.news
{width: 150px;
background: #BEE8F5; }

Получим:

Можно сделать и наоборот. Задать фиксированную высоту, а ширину оставить по умолчанию.

Указывая размеры блока незабывайте,что размеры задаются только для содержимого блока. Размеры полей, отступов, рамок в блок не входят.
Поля только принимают цвет блока, но в размер не входят.

Таким образом происходит определение размеров блоков CSS. Приступаем к позиционированию.

Перейти к следующему уроку
Позиционирование блоков CSS

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!