CSS 尺寸 (Dimension)

CSS 尺寸 (Dimension) 屬性可讓你控制元素的高度和寬度。同樣，它允許你增加行間距。

實例：設定元素的高度

<!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>

運行實例»

點擊"運行實例" 按鈕查看線上實例

這個範例示範如何設定不同元素的高度。

實例：使用百分比設定映像的高度

<!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>

#執行實例»

點擊"運行實例"按鈕查看在線實例

這個範例示範如何使用百分比值來設定元素的高度。

實例：使用像素值來設定元素的寬度

<!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>

#運行實例»##點擊"運行實例"按鈕查看線上實例

本範例示範如何使用像素值來設定元素的寬度。

實例：設定元素的最大高度

<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>

#運行實例»點擊"運行實例"按鈕查看線上實例

此範例示範如何設定元素的最大高度。

實例：使用百分比來設定元素的最大寬度

<!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>

#運行實例»##點擊"運行實例"按鈕查看線上實例

本例示範如何使用百分比值來設定元素的最大寬度。

實例：設定元素的最低高度

<!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>

#執行實例»
點擊"運行實例" 按鈕查看線上實例

此範例示範如何設定元素的最小高度。

實例：使用像素值設定元素的最小寬度

<!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>

#運行實例»
##點擊"運行實例"按鈕查看線上實例

這個範例示範如何使用像素值設定元素的最小寬度。