Войти
Регистрация

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

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

Если посмотреть на любой сайт, неопытный увидит кучу элементов, текстов, картинок, каким-то образом расположенных на странице. Опытный верстальщик в первую очередь сразу увидит блоки, из которых сайт состоит и внутренние блоки каждого из них.

Легче всего открыть HTML-код и посмотреть на него, там мы увидим очень много тегов <div> из которых построен сайт. Каждый такой див содержит тексты, фото и остальные элементы.

Какие-то блоки имеют фиксированную ширину, а какие-то то и дело меняют свои размеры и прыгают с места на место, в зависимости от размера экрана.

Чтобы сайт выглядел красиво и правильно, важно четко определять ширину блоков, знать, как они себя ведут по ширине и высоте.

Напишем простой код блока div:

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

1. Высота блоков

Зададим ему только высоту и задний фон, а также фон тела сайта:

body {
   background: grey;
}
div {
   background: #7ac1e1;
   height: 100px;
}

Мы увидим, что блок стал высотой в 100 пикселей и растянулся по ширине окна, т.к. блочные элементы занимают всю ширину окна.

Теперь уберем заданную высоту, оставим только задний фон и добавим внутри блока любой текст:

<body>
   <div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu...
   </div>
</body>
body {
   background: grey;
}
div {
   background: #7ac1e1;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu...

Видим, что высота блока изменилась в зависимости от контента, т.к. по умолчанию у блока задана высота auto (height:auto), это значит, что высота подстраивается под контент в блоке.

Обрезание или скрытие текста в блоке

Теперь вернем обратно высоту 100 пикселей блоку и добавим текста в 3 раза больше:

<body>
   <div>Тот же текст, но в 3 раза больше</div>
</body>
body {
   background: grey;
}
div {
   background: #7ac1e1;
   height: 100px;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu...

Мы увидим, что текст вылез за пределы блока, т.к. мы задали фиксированную высоту в 100 пикселей, что оказалось мало для такого большого текста. Как это решить?

Задаем блоку следующее свойство overflow, которое принимает 2 значения: hidden и scroll

  • hidden - обрезает текст, вышедший за рамки высоты блока;
  • scroll - создает полосу прокрутки внутри блока;

Результат обоих значений:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu...

Это свойство пригодится, если у Вас блок фиксированной высоты, а текст на сайте выводится динамически и всегда разного размера, чтобы дизайн сайта не сломался.

2. Ширина блоков

В предыдущем примере мы увидели, что блок, если ему не задавать ширину, занимает всю ширину окна. Но если задать блоку ширину, например, 150 пикселей, то мы увидим, что он занимает 150 пикселей в ширину.

div {
   background: #7ac1e1;
   height: 100px;
   width: 150px;
}

Но дело в том, что рядом с этим блоком еще один блок, либо другой элемент расположить не получится, все они перейдут на новую строку, т.к. этот блок хоть и визуально занимает 150 пикселей в ширину, он все-равно скрыто занял всю ширину страницы и не дает ни чему справа от него расположиться.

Добавим еще один блок и увидим, что он расположился под текущим:

<body>
   <div>Первый блок</div><div>Второй блок</div>
</body>

Первый блок
Второй блок

Чтобы расположить их рядом друг с другом, нам придет на помощь свойство display, которое задает то, как элемент будет показан на странице, со значением inline-block:

div {
   display: inline-block;
}

Первый блок
Второй блок

Все размеры были абсолютные, в пикселях, но можно указывать относительные, в процентах (%), но ширина и высота будет определяться в процентах от ширины и высоты родительского блока.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?