CSS 차원


CSS 차원

CSS 차원 속성을 사용하면 요소의 높이와 너비를 제어할 수 있습니다. 마찬가지로 줄 간격을 늘릴 수도 있습니다.

추가 예시

예: 요소 높이 설정

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

예제 실행»

"실행"을 클릭합니다. 인스턴스' 버튼 온라인 예시 보기

이 예에서는 픽셀 값을 사용하여 요소의 최소 너비를 설정하는 방법을 보여줍니다.

모든 CSS Dimension 속성

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