CSS Dimension
CSS Dimension
The CSS Dimension property allows you to control the height and width of an element. Likewise, it allows you to increase line spacing.
More examples
Example: Setting the height of an element
<!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>Run Example»
Click the "Run Example" button to view the online example
This example demonstrates how to set the height of different elements.
Example: Use percentage to set the height of the 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>Run Example»
Click the "Run Example" button to view online Example
This example demonstrates how to set the height of an element using a percentage value.
Example: Use pixel values to set the width of an element
<!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>Run Example»
Click the "Run Example" button View online example
This example demonstrates how to use pixel values to set the width of an element.
Example: Set the maximum height of the element
<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>Run Example»
Click the "Run Example" button to view the online example
This example demonstrates how to set the maximum height of an element.
Example: Use percentage to set the maximum width of an element
<!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>Run Example»
Click the "Run Example" button View online examples
This example demonstrates how to use a percentage value to set the maximum width of an element.
Example: Set the minimum height of the element
<!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>Run Example»
Click the "Run Example" button to view the online example
This example demonstrates how to set the minimum height of an element.
Example: Set the minimum width of an element using pixel values
<!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>Run Example»
Click the "Run Example" button View online examples
This example demonstrates how to set the minimum width of an element using a pixel value.
