Dimension CSS


CSS Dimension

La propriété CSS Dimension vous permet de contrôler la hauteur et la largeur d'un élément. De même, cela vous permet d’augmenter l’espacement des lignes.

Plus d'exemples

Exemple : Définir la hauteur de l'élément

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img.normal
{
	height:auto;
}
img.big
{
	height:120px;
}
p.ex
{
	height:100px;
	width:100px;
}
</style>
</head>

<body>
<img class="normal" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" /><br>
<img class="big" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>
<p>这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本.</p>
</body>
</html>

Exécuter l'exemple»

Cliquez sur le bouton «Exécuter l'exemple» pour voir l'exemple en ligne

Cet exemple montre comment définir la hauteur de différents éléments.

Exemple : utilisez un pourcentage pour définir la hauteur de l'image

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>

<body>
<img class="normal" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" /><br>
<img class="big" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" /><br>
<img class="small" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
</body>
</html>

Exécuter l'exemple»

Cliquez sur "Exécuter l'exemple" Bouton " pour afficher en ligne Exemple

Cet exemple montre comment définir la hauteur d'un élément à l'aide d'une valeur en pourcentage.

Exemple : Utilisez les valeurs de pixels pour définir la largeur d'un élément

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img {width:200px;}
</style>
</head>
<body>

<img src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />

</body>
</html>

Exécuter l'exemple»

Cliquez sur l'icône Bouton "Exécuter l'instance" Voir des exemples en ligne

Cet exemple montre comment utiliser les valeurs de pixels pour définir la largeur d'un élément.

Exemple : définir la hauteur maximale de l'élément

<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
p
{
	max-height:50px;
	background-color:yellow;
}
</style>
</head>

<body>
<p>本段落的最大高度被设置为 50px。 本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。</p>
</body>
</html>

Exécuter l'exemple»

Cliquez sur le bouton "Exécuter l'exemple" pour voir l'exemple en ligne

Cet exemple montre comment définir la hauteur maximale d'un élément.

Exemple : utilisez des pourcentages pour définir la largeur maximale d'un élément

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	max-width:20%;
	background-color:yellow;
}
</style>
</head>
<body>

<p>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>

</body>
</html>

Exécuter un exemple»

Cliquez sur "Exécuter Bouton "Exemple" Voir des exemples en ligne

Cet exemple montre comment utiliser une valeur de pourcentage pour définir la largeur maximale d'un élément.

Exemple : Définir la hauteur minimale de l'élément

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	min-height:100px;
	background-color:yellow;
}
</style>
</head>

<body>
<p>The minimum height of this paragraph is set to 100px.</p>
</body>
</html>

Exécuter l'exemple»

Cliquez sur le bouton "Exécuter l'exemple" pour voir l'exemple en ligne

Cet exemple montre comment définir la hauteur minimale d'un élément.

Exemple : définissez la largeur minimale d'un élément à l'aide des valeurs de pixels

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	min-width:150px;
	background-color:yellow;
}
</style>
</head>

<body>
<p>这个段落的最低限度设置为o 150px.</p>
</body>
</html>

Exécuter l'exemple»

Cliquez sur "Exécuter Bouton "Instance" Voir des exemples en ligne

Cet exemple montre comment définir la largeur minimale d'un élément à l'aide d'une valeur de pixel.

Toutes les propriétés des dimensions CSS

属性描述
height设置元素的高度。
line-height设置行高。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。