Размер блока CSS

Материал из Викижурнал
Перейти к навигации Перейти к поиску
CSS - Размер элемента
CSS Размер элемента
Селектор: table; div; image; #name
Свойство: width; height; max-height; max-width; min-height; min-width;
Значения: px

Разместив на странице блок - <div>, таблицу - <table> или картинку, то через CSS можно задать настройки размера тому или иному элементу. Рассмотрим на примере обычного блока <div>

Использование CSS для оформления сайтов можно обсудить в специально созданной теме нашего форума.

Размер блока CSS

У нас есть блок, расположенный на странице и имеющий следующий HTML код:

<div id="name">Текст внутри блока</div>

Размер данного блока можно менять по высоте и ширине используя значения:

  • width - ширина
  • height - высота

Эти значения можно вносить как в пикселях, так и в процентном соотношении по ширине поля, в котором находится блок. Например так даём значение размеров блока в CSS файле:

#name {
width: 400px;
height: 30px;
border: 1px solid black;
}

#name {
width: 40%;
height: 40px;
border: 1px solid black;
}

Получаем:

Текст, картинка, ссылка или другие элементы страницы
Текст, картинка, ссылка или другие элементы страницы

В первом варианте у нас длина блока составляет 400 пикселей, а высота 40 пикселей. Во втором варианте длина занимает 40% поля страницы, а высота 40 пикселей. Специально сделали границы блока чёрным цветом, чтобы можно было видеть наглядно границы элемента, заданные в CSS.

CSS тэги для настройки размера

Основные свойства, определяющие размеры того или иного HTML элемента:

  • height - свойства высоты
  • width - свойства ширины
  • max-height - максимальное значение высоты для элемента
  • max-width - максимальное значения ширины для элемента
  • min-height - минимальное значение высоты для элемента
  • min-width - минимальное значения ширины для элемента

Примечание

Если же есть какие-либо вопросы, как задать размеры тому или иному элементу на странице, то можно задать вопрос в специально созданной теме про CSS на нашем форуме.

Статьи по теме CSS