Свойства размеров CSS позволяют вам контролировать высоту и ширину элемента.
Пример 1
Этот пример демонстрирует, как установить высоту различных элементов.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
img.normal { height:auto; }
img.big { height:120px; }
p.ex { height:130px; width:130px; }
</style>
</head>
<body>
<img class="normal" src="/images/xhtml-css.png" width="130" height="102" /><br />
<img class="big" src="/images/xhtml-css.png" width="130" height="102" />
<p class="ex">Высота и ширина параграфа - 130px.</p>
<p>Это некоторый текст в параграфе. Это некоторый текст в параграфе. Это некоторый текст в параграфе. Это некоторый текст в параграфе. Это некоторый текст в параграфе. Это некоторый текст в параграфе. Это некоторый текст в параграфе. Это некоторый текст в параграфе. </p>
</body>
</html>
Пример 2
Этот пример показывает, как установить высоту элемента с помощью процентов.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
img.normal { height:auto; }
img.big { height:50%; }
img.small { height:10%; }
</style>
</head>
<body>
<img class="normal" src="/images/xhtml-css.png" width="130" height="102" />
<img class="big" src="/images/xhtml-css.png" width="130" height="102" />
<img class="small" src="/images/xhtml-css.png" width="130" height="102" />
</body>
</html>
Пример 3
В этом примере показано, как задать ширину элемента, используя значение в пикселях.Пример 4
Этот пример показывает, как установить максимальную высоту элемента.<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
p { max-height:100px; }
</style>
</head>
<body>
<p>Максимальная высота параграфа 100px.</p>
</body>
</html>
Пример 5
Этот пример показывает, как установить максимальную ширину элемента с помощью процентов.<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
p { max-width:50%; }
</style>
</head>
<body>
<p>Это некоторый текст. Это некоторый текст. Это некоторый текст. Это некоторый текст. Это некоторый текст. Это некоторый текст. Это некоторый текст. Это некоторый текст. Это некоторый текст. Это некоторый текст. Это некоторый текст. Это некоторый текст. </p>
</body>
</html>
Пример 6
Этот пример показывает, как установить минимальную высоту элемента.<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
p { min-height:100px; }
</style>
</head>
<body>
<p>Минимальная высота параграфа 100px.</p>
</body>
</html>
Пример 7
Этот пример показывает, как установить минимальную ширину элемента, используя значение в пикселях.Все свойства размеров CSS
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| height | Устанавливает высоту элемента | auto length % inherit |
1 |
| max-height | Устанавливает максимальную высоту элемента | none length % inherit |
2 |
| max-width | Устанавливает максимальную ширину элемента | none length % inherit |
2 |
| min-height | Устанавливает минимальную высоту элемента |
length % inherit |
2 |
| min-width | Устанавливает минимальную ширину элемента | length % inherit |
2 |
| width | Устанавливает ширину элемента | auto length % inherit |
1 |
Была ли эта информация полезной?
