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

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

Разместив на странице блок - <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 на нашем форуме.