Размеры элементов в CSS

Разбить на страницы

Показывать лекцию целиком

Данные параметры CSS позволяют управлять высотой и шириной элемента, увеличением интервала между двумя строками.

Пример:

В примере показано, как увеличить интервал между строками. 

<html>
<head>
</head>

<body>
<div>
Стандартный интервал между строками.<br> 
Стандартный интервал между строками. 
</div>
<br>

<div style="line-height: 0.4cm">
Уменьшенный интервал между строками.<br> 
Уменьшенный интервал между строками. 
</div>
<br>

<div style="line-height: 0.9cm">
Увеличенный интервал между строками.<br> 
Увеличенный интервал между строками. 
</div>

</body>
</html>

Параметры размеров элементов CSS

Данные параметры позволяют управлять высотой и шириной элемента, а также изменить межстрочный интервал.

Данные свойства поддерживаются следующими браузерами (в скобках сокращенный вариант, который применяется далее в таблицах параметров и значений): Internet Explorer (IE), Firefox (F), Netscape(N).

Параметр	Описание	Значения	IE	F	N	W3C
`height`	Задает высоту элемента	`auto`	4	1	6	1*
		`length`
		%
`line-height`	Задает интервал между строками	`normal`	4	1	4	1
		`number`
		`length`
		%
`max-height`	Задает максимальную высоту элемента	`none`	-	1	6	2
		`length`
		%
`max-width`	Задает максимальную ширину элемента	`none`	-	1	5	2
		`length`
		%
`min-height`	Задает минимальную высоту элемента	`length`	-	1	6	2
`min-height`	Задает минимальную высоту элемента	%	-	1	6	2
`min-width`	Задает минимальную ширину элемента	`length`	-	1	6	2
`min-width`	Задает минимальную ширину элемента	%	-	1	6	2
`width`	Задает ширину элемента	`auto`	4	1	4	1
		%
		`length`

(* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).

Размеры элементов в CSS: подробное рассмотрение

Параметр 'height'

Используется для задания высоты элемента.

Наследование: нет.

Пример:

p
{
height: 50px
}

Может принимать следующие значения:

Значение	Описание
`auto`	Браузер вычисляет реальную высоту
`length`	Определяет высоту в px, см, и т.д.
`%`	Определяет высоту в % от объемлющего блока

Параметр 'line-height'

Используется для задания интервала между строками.

Наследование: Да.

Примечание: Отрицательные значения не допускаются.

Примеры:

div
{ 
line-height: 2.1
}

div
{ 
line-height: 10pt
} 

div
{ 
line-height: 120%
}

Может принимать следующие значения:

Значение	Описание
`normal`	Задает приемлемый интервал между строками
`number`	Задает число, которое при умножении на размер текущего шрифта задает интервал между строками
`length`	Задает фиксированный интервал между строками
`%`	Задает интервал между строками в % от размера текущего шрифта

Параметр 'max-height'

Используется для задания максимальной высоты элемента.

Наследование: нет.

Пример:

div
{
max-height: 200%
}

Может принимать следующие значения:

Значение	Описание
`none`	Отсутствие ограничений на максимальную высоту элемента
`length`	Определяет максимальную высоту элемента
`%`	Определяет максимальную высоту элемента в % от объемлющего блока

Параметр 'max-width'

Используется для задания максимальной ширины элемента.

Наследование: нет.

Пример:

h6
{
max-width: 75%
}

Может принимать следующие значения:

Значение	Описание
`none`	Отсутствие ограничений на максимальную ширину элемента
`length`	Определяет максимальную ширину элемента
`%`	Определяет максимальную ширину элемента в % от объемлющего блока

Параметр 'min-height'

Используется для задания минимальной высоты элемента.

Наследование: нет.

Пример:

div
{
min-height: 20%
}

Может принимать следующие значения:

Значение	Описание
`length`	Определяет минимальную высоту элемента
`%`	Определяет минимальную высоту элемента в % от объемлющего блока

Параметр 'min-width'

Используется для задания минимальной ширины элемента.

Наследование: нет.

Пример:

h6
{
min-width: 20%
}

Может принимать следующие значения:

Значение	Описание
`length`	Определяет минимальную ширину элемента
`%`	Определяет минимальную ширину элемента в % от объемлющего блока

Параметр 'width'

Используется для задания ширины элемента.

Наследование: нет.

Пример:

hr
{
width: 20%
}

Может принимать следующие значения:

Значение	Описание
`auto`	Браузер вычисляет реальную ширину
`%`	Определяет ширину в % от ширины родительского элемента
`length`	Определяет ширину в px, см, и т.д.

Форматирование в CSS

Данные параметры позволяют определить, как и в каком месте вывести элемент.

Примеры:

В примере показано, как вывести элемент.

<html>
<head>
<style type="text/css">
h1 {display: inline}
pre {display: none}
</style>
</head>

<body>

<pre>Эта информация не будет отображена</pre>
<h1>Между этими двумя элементами</h1>
<h1>нет интервала</h1>


</body>
</html>

Пример показывает, как создать смещение изображения в параграфе вправо.

<html>
<head>
</head>

<body>
<p>
<img style="float:right" src="image.gif" width="100" height="70" />
В параграфе изображение смещено вправо. В параграфе изображение смещено вправо.

</p>
</body>

</html>

Пример показывает, как создать смещение изображения в параграфе вправо и добавить к изображению границы и отступы.

<html>
<head>
</head>

<body>
<p>
<img style="float:right; border:1px solid blue; margin:0px 0px 15px 20px;" 
src="image.gif" width="100" height="70" />
Изображение смещено вправо, имеет границу из сплошной линии и отступы.
</p>
</body>

</html>

Пример показывает, как можно сместить изображение с заголовком вправо.

<html>
<head>
</head>

<body>
<div style="float:right; border:2px dotted blue; text-align:center; 
            padding:5px; margin:5 5 10px 10px; width:160px;">
<img src="image.gif" width="120" height="70" /><br />
Изучайте CSS!
</div>

<p>
В данном примере элемент div имеет ширину 160 пикселей, содержит изображение, 
смещается вправо.
Для дистанцирования текста от div, к последнему добавлены отступы, 
а для выделения картинки и заголовка - границы и поля.
</p>
</body>

</html>

Пример показывает, как можно сместить первую букву параграфа влево.

<html>
<head>
<style type="text/css">
b
{
float:left;
line-height:95%;
font-size:500%;
font-family:Comic Sans MS;
width:1.2em;
}
</style>
</head>

<body>
<p>
<b>В</b> параграфе элемент b имеет ширину - 1.2 размера текущего шрифта,
         размер шрифта - 500%, межстрочный интервал - 95%, шрифт буквы - Comic Sans MS. 
</p>

</body>
</html>

Пример показывает, как создать горизонтальное меню.

<html>
<head>
<style type="text/css">
ol
{
float:left;
margin:5;
padding:5;
width:100%;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:blue;
background-color:yellow;
padding:0.4em 0.7em;
border:2px solid gray;
}
a:hover {background-color:#0F0FFF; color:yellow}
li {display:inline}
</style>
</head>

<body>
<ol>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
</ol>

<p>
В примере элементы ol и a смещены влево. 
У элементов li отсутствует разрыв строки перед или после элемента. 
</p>

</body>
</html>

Пример показывает, как создать страницы без таблиц.

<html>
<head>
<style type="text/css">
div.block
{
width:100%;
margin:0px;
border:1px solid orange;
line-height:150%;
}
div.top,div.bottom
{
padding:0.5em;
color:white;
background-color:orange;
clear:left;
}
h1.top
{
padding:0;
margin:0;
}
div.move
{
float:left;
width:160px;
margin:0;
padding:1em;
color: blue;
}
div.body
{
margin-left:190px;
border-left:1px solid orange;
padding:1em;
}
</style>
</head>
<body>

<div class="block">
<div class="top"><h1 class="top">www.Intuit.ru</h1></div>
<div class="move"><p>"Сущности, необходимые для объяснения чего-либо, 
     не следует умножать без необходимости." Уильям Оккам (1285-1349)</p></div>
<div class="body">
<h2>Свободно доступные пособия по созданию Web</h2>
<p>В Интернет можно найти все необходимые для создания Web пособия,
начиная от основ HTML и XHTML и заканчивая XML, XSL, Multimedia и WAP.</p>
<p>Intuit -- Сайт для разработчиков Web!</p></div>
<div class="bottom">copy;Copyright</div>
</div>

</body>
</html>

В примере показано, как позиционировать элемент относительно его обычного положения.

<html>
<head>
<style type="text/css">
p.left_plus
{
position:relative;
left:15px
}
p.left_minus
{
position:relative;
left:-15px
}
p.right_plus
{
position:relative;
right:35px
}
p.right_minus
{
position:relative;
right:-35px
}
</style>
</head>

<body>
<h2>Это заголовок в обычном положении</h2>
<p class="left_plus">Параграф имеет смещение относительно своего обычного положения</p>
<p class="left_minus">Параграф имеет смещение относительно своего обычного положения</p>
<p class="right_plus">Параграф имеет смещение относительно своего обычного положения</p>
<p class="right_minus">Параграф имеет смещение относительно своего обычного положения</p>
</body>

</html>

В примере показано, как позиционировать элемент с помощью абсолютного значения.

<html>
<head>
<style type="text/css">
p.ab
{
position:absolute;
left:50px;
top:50px
}
</style>
</head>

<body>
<p class="ab">Параграф позиционируется с абсолютным значением</p>
<pre>С помощью абсолютного позиционирования элемент можно поместить в любом месте страницы.
Параграф имеет смещение - на 50px от левого края страницы и 
на 50px от верхнего края страницы.</pre>
</body>

</html>

В примере показано, как сделать элемент невидимым.

<html>
<head>
<style type="text/css">
p.off {visibility:hidden}
p.on {visibility:visible}
</style>
</head>

<body>
<p class="on">Параграф виден</p>
<p class="off">Параграф не виден</p>
</body>

</html>

В примере показано, как изменить курсор.

<html>
<head>
</head>

<body>

<h4 style="color:blue">Курсоры:</h4>

<div style="cursor:auto">
Auto</div>
<div style="cursor:crosshair">
Crosshair</div>
<div style="cursor:default">
Default</div>
<div style="cursor:pointer">
Pointer</div>
<div style="cursor:move">
Move</div>
<div style="cursor:text">
text</div>
<div style="cursor:wait">
wait</div>
<div style="cursor:help">
help</div>

<h4 style="color:blue">Курсоры типа resize:</h4>

<div style="cursor:e-resize">
e-resize</div>
<div style="cursor:ne-resize">
ne-resize</div>
<div style="cursor:nw-resize">
nw-resize</div>
<div style="cursor:n-resize">
n-resize</div>
<div style="cursor:se-resize">
se-resize</div>
<div style="cursor:sw-resize">
sw-resize</div>
<div style="cursor:s-resize">
s-resize</div>
<div style="cursor:w-resize">
w-resize</div>
</body>

</html>

Страницы:

Пример:

В примере показано, как увеличить интервал между строками. 

<html>
<head>
</head>

<body>
<div>
Стандартный интервал между строками.<br> 
Стандартный интервал между строками. 
</div>
<br>

<div style="line-height: 0.4cm">
Уменьшенный интервал между строками.<br> 
Уменьшенный интервал между строками. 
</div>
<br>

<div style="line-height: 0.9cm">
Увеличенный интервал между строками.<br> 
Увеличенный интервал между строками. 
</div>

</body>
</html>

Параметры размеров элементов CSS

Данные параметры позволяют управлять высотой и шириной элемента, а также изменить межстрочный интервал.

Параметр	Описание	Значения	IE	F	N	W3C
`height`	Задает высоту элемента	`auto`	4	1	6	1*
		`length`
		%
`line-height`	Задает интервал между строками	`normal`	4	1	4	1
		`number`
		`length`
		%
`max-height`	Задает максимальную высоту элемента	`none`	-	1	6	2
		`length`
		%
`max-width`	Задает максимальную ширину элемента	`none`	-	1	5	2
		`length`
		%
`min-height`	Задает минимальную высоту элемента	`length`	-	1	6	2
`min-height`	Задает минимальную высоту элемента	%	-	1	6	2
`min-width`	Задает минимальную ширину элемента	`length`	-	1	6	2
`min-width`	Задает минимальную ширину элемента	%	-	1	6	2
`width`	Задает ширину элемента	`auto`	4	1	4	1
		%
		`length`

(* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).

Размеры элементов в CSS: подробное рассмотрение

Параметр 'height'

Используется для задания высоты элемента.

Наследование: нет.

Пример:

p
{
height: 50px
}

Может принимать следующие значения:

Значение	Описание
`auto`	Браузер вычисляет реальную высоту
`length`	Определяет высоту в px, см, и т.д.
`%`	Определяет высоту в % от объемлющего блока

Параметр 'line-height'

Используется для задания интервала между строками.

Наследование: Да.

Примечание: Отрицательные значения не допускаются.

Примеры:

div
{ 
line-height: 2.1
}

div
{ 
line-height: 10pt
} 

div
{ 
line-height: 120%
}

Может принимать следующие значения:

Значение	Описание
`normal`	Задает приемлемый интервал между строками
`number`	Задает число, которое при умножении на размер текущего шрифта задает интервал между строками
`length`	Задает фиксированный интервал между строками
`%`	Задает интервал между строками в % от размера текущего шрифта

Параметр 'max-height'

Используется для задания максимальной высоты элемента.

Наследование: нет.

Пример:

div
{
max-height: 200%
}

Может принимать следующие значения:

Значение	Описание
`none`	Отсутствие ограничений на максимальную высоту элемента
`length`	Определяет максимальную высоту элемента
`%`	Определяет максимальную высоту элемента в % от объемлющего блока

Параметр 'max-width'

Используется для задания максимальной ширины элемента.

Наследование: нет.

Пример:

h6
{
max-width: 75%
}

Может принимать следующие значения:

Значение	Описание
`none`	Отсутствие ограничений на максимальную ширину элемента
`length`	Определяет максимальную ширину элемента
`%`	Определяет максимальную ширину элемента в % от объемлющего блока

Параметр 'min-height'

Используется для задания минимальной высоты элемента.

Наследование: нет.

Пример:

div
{
min-height: 20%
}

Может принимать следующие значения:

Значение	Описание
`length`	Определяет минимальную высоту элемента
`%`	Определяет минимальную высоту элемента в % от объемлющего блока

Параметр 'min-width'

Используется для задания минимальной ширины элемента.

Наследование: нет.

Пример:

h6
{
min-width: 20%
}

Может принимать следующие значения:

Значение	Описание
`length`	Определяет минимальную ширину элемента
`%`	Определяет минимальную ширину элемента в % от объемлющего блока

Параметр 'width'

Используется для задания ширины элемента.

Наследование: нет.

Пример:

hr
{
width: 20%
}

Может принимать следующие значения:

Значение	Описание
`auto`	Браузер вычисляет реальную ширину
`%`	Определяет ширину в % от ширины родительского элемента
`length`	Определяет ширину в px, см, и т.д.

Форматирование в CSS

Данные параметры позволяют определить, как и в каком месте вывести элемент.

Примеры:

В примере показано, как вывести элемент.

<html>
<head>
<style type="text/css">
h1 {display: inline}
pre {display: none}
</style>
</head>

<body>

<pre>Эта информация не будет отображена</pre>
<h1>Между этими двумя элементами</h1>
<h1>нет интервала</h1>


</body>
</html>

Пример показывает, как создать смещение изображения в параграфе вправо.

<html>
<head>
</head>

<body>
<p>
<img style="float:right" src="image.gif" width="100" height="70" />
В параграфе изображение смещено вправо. В параграфе изображение смещено вправо.

</p>
</body>

</html>

<html>
<head>
</head>

<body>
<p>
<img style="float:right; border:1px solid blue; margin:0px 0px 15px 20px;" 
src="image.gif" width="100" height="70" />
Изображение смещено вправо, имеет границу из сплошной линии и отступы.
</p>
</body>

</html>

Пример показывает, как можно сместить изображение с заголовком вправо.

<html>
<head>
</head>

<body>
<div style="float:right; border:2px dotted blue; text-align:center; 
            padding:5px; margin:5 5 10px 10px; width:160px;">
<img src="image.gif" width="120" height="70" /><br />
Изучайте CSS!
</div>

<p>
В данном примере элемент div имеет ширину 160 пикселей, содержит изображение, 
смещается вправо.
Для дистанцирования текста от div, к последнему добавлены отступы, 
а для выделения картинки и заголовка - границы и поля.
</p>
</body>

</html>

Пример показывает, как можно сместить первую букву параграфа влево.

<html>
<head>
<style type="text/css">
b
{
float:left;
line-height:95%;
font-size:500%;
font-family:Comic Sans MS;
width:1.2em;
}
</style>
</head>

<body>
<p>
<b>В</b> параграфе элемент b имеет ширину - 1.2 размера текущего шрифта,
         размер шрифта - 500%, межстрочный интервал - 95%, шрифт буквы - Comic Sans MS. 
</p>

</body>
</html>

Пример показывает, как создать горизонтальное меню.

<html>
<head>
<style type="text/css">
ol
{
float:left;
margin:5;
padding:5;
width:100%;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:blue;
background-color:yellow;
padding:0.4em 0.7em;
border:2px solid gray;
}
a:hover {background-color:#0F0FFF; color:yellow}
li {display:inline}
</style>
</head>

<body>
<ol>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
</ol>

<p>
В примере элементы ol и a смещены влево. 
У элементов li отсутствует разрыв строки перед или после элемента. 
</p>

</body>
</html>

Пример показывает, как создать страницы без таблиц.

<html>
<head>
<style type="text/css">
div.block
{
width:100%;
margin:0px;
border:1px solid orange;
line-height:150%;
}
div.top,div.bottom
{
padding:0.5em;
color:white;
background-color:orange;
clear:left;
}
h1.top
{
padding:0;
margin:0;
}
div.move
{
float:left;
width:160px;
margin:0;
padding:1em;
color: blue;
}
div.body
{
margin-left:190px;
border-left:1px solid orange;
padding:1em;
}
</style>
</head>
<body>

<div class="block">
<div class="top"><h1 class="top">www.Intuit.ru</h1></div>
<div class="move"><p>"Сущности, необходимые для объяснения чего-либо, 
     не следует умножать без необходимости." Уильям Оккам (1285-1349)</p></div>
<div class="body">
<h2>Свободно доступные пособия по созданию Web</h2>
<p>В Интернет можно найти все необходимые для создания Web пособия,
начиная от основ HTML и XHTML и заканчивая XML, XSL, Multimedia и WAP.</p>
<p>Intuit -- Сайт для разработчиков Web!</p></div>
<div class="bottom">copy;Copyright</div>
</div>

</body>
</html>

В примере показано, как позиционировать элемент относительно его обычного положения.

<html>
<head>
<style type="text/css">
p.left_plus
{
position:relative;
left:15px
}
p.left_minus
{
position:relative;
left:-15px
}
p.right_plus
{
position:relative;
right:35px
}
p.right_minus
{
position:relative;
right:-35px
}
</style>
</head>

<body>
<h2>Это заголовок в обычном положении</h2>
<p class="left_plus">Параграф имеет смещение относительно своего обычного положения</p>
<p class="left_minus">Параграф имеет смещение относительно своего обычного положения</p>
<p class="right_plus">Параграф имеет смещение относительно своего обычного положения</p>
<p class="right_minus">Параграф имеет смещение относительно своего обычного положения</p>
</body>

</html>

В примере показано, как позиционировать элемент с помощью абсолютного значения.

<html>
<head>
<style type="text/css">
p.ab
{
position:absolute;
left:50px;
top:50px
}
</style>
</head>

<body>
<p class="ab">Параграф позиционируется с абсолютным значением</p>
<pre>С помощью абсолютного позиционирования элемент можно поместить в любом месте страницы.
Параграф имеет смещение - на 50px от левого края страницы и 
на 50px от верхнего края страницы.</pre>
</body>

</html>

В примере показано, как сделать элемент невидимым.

<html>
<head>
<style type="text/css">
p.off {visibility:hidden}
p.on {visibility:visible}
</style>
</head>

<body>
<p class="on">Параграф виден</p>
<p class="off">Параграф не виден</p>
</body>

</html>

В примере показано, как изменить курсор.

<html>
<head>
</head>

<body>

<h4 style="color:blue">Курсоры:</h4>

<div style="cursor:auto">
Auto</div>
<div style="cursor:crosshair">
Crosshair</div>
<div style="cursor:default">
Default</div>
<div style="cursor:pointer">
Pointer</div>
<div style="cursor:move">
Move</div>
<div style="cursor:text">
text</div>
<div style="cursor:wait">
wait</div>
<div style="cursor:help">
help</div>

<h4 style="color:blue">Курсоры типа resize:</h4>

<div style="cursor:e-resize">
e-resize</div>
<div style="cursor:ne-resize">
ne-resize</div>
<div style="cursor:nw-resize">
nw-resize</div>
<div style="cursor:n-resize">
n-resize</div>
<div style="cursor:se-resize">
se-resize</div>
<div style="cursor:sw-resize">
sw-resize</div>
<div style="cursor:s-resize">
s-resize</div>
<div style="cursor:w-resize">
w-resize</div>
</body>

</html>

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

Размеры элементов в CSS

Пример:

Параметры размеров элементов CSS

Размеры элементов в CSS: подробное рассмотрение

Параметр 'height'

Параметр 'line-height'

Параметр 'max-height'

Параметр 'max-width'

Параметр 'min-height'

Параметр 'min-width'

Параметр 'width'

Форматирование в CSS

Пример:

Параметры размеров элементов CSS

Размеры элементов в CSS: подробное рассмотрение

Параметр 'height'

Параметр 'line-height'

Параметр 'max-height'

Параметр 'max-width'

Параметр 'min-height'

Параметр 'min-width'

Параметр 'width'

Форматирование в CSS

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!