Dimensi CSS


Dimensi CSS

Sifat Dimensi CSS membolehkan anda mengawal ketinggian dan lebar elemen. Begitu juga, ia membolehkan anda meningkatkan jarak baris.

Lagi contoh

Contoh: Tetapkan ketinggian elemen

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

Jalankan Contoh»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Contoh ini menunjukkan cara menetapkan ketinggian elemen yang berbeza.

Contoh: Gunakan peratusan untuk menetapkan ketinggian imej

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

Klik "Run Example " butang untuk melihat dalam talian Contoh

Contoh ini menunjukkan cara menetapkan ketinggian elemen menggunakan nilai peratusan.

Contoh: Gunakan nilai piksel untuk menetapkan lebar elemen

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

Contoh Jalankan»

Klik Butang "Jalankan Instance" Lihat contoh dalam talian

Contoh ini menunjukkan cara menggunakan nilai piksel untuk menetapkan lebar elemen.

Contoh: Tetapkan ketinggian maksimum elemen

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

Klik butang "Run Example" untuk melihat contoh dalam talian

Contoh ini menunjukkan cara menetapkan ketinggian maksimum unsur.

Contoh: Gunakan peratusan untuk menetapkan lebar maksimum elemen

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

Contoh Jalankan»

Klik butang "Jalankan Butang Instance" Lihat contoh dalam talian

Contoh ini menunjukkan cara menggunakan nilai peratusan untuk menetapkan lebar maksimum elemen.

Contoh: Tetapkan ketinggian minimum elemen

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

Klik butang "Run Example" untuk melihat contoh dalam talian

Contoh ini menunjukkan cara menetapkan ketinggian minimum elemen.

Contoh: Tetapkan lebar minimum elemen menggunakan nilai piksel

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

Contoh Jalankan»

Klik butang "Jalankan Butang Instance" Lihat contoh dalam talian

Contoh ini menunjukkan cara menetapkan lebar minimum elemen menggunakan nilai piksel.

Semua sifat Dimensi CSS

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