CSS Margin(margin)
CSS Margin(margin) 속성은 요소 주위의 공간을 정의합니다.
Margin
margin은 요소 주변 영역(외부 테두리)을 지웁니다. 여백은 배경색이 없으며 완전히 투명합니다.
여백은 요소의 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백을 독립적으로 변경할 수 있습니다. 모든 속성을 한 번에 변경하는 것도 가능합니다. 단위는 픽셀, 퍼센트, 센티미터 등을 사용할 수 있습니다.
CSS 여백 속성
CSS에서는 측면별로 여백을 다르게 지정할 수 있습니다| De 비문 | |
|---|---|
| 약어 속성. 하나의 문에서 모든 여백 속성을 설정합니다. | |
| 요소의 아래쪽 여백을 설정합니다. | |
| 요소의 왼쪽 여백을 설정합니다. | |
| 요소의 오른쪽 여백을 설정합니다. | |
| 요소의 위쪽 여백을 설정합니다. |
예여백을 서로 다른 면에 설정하세요
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>프로그램을 실행하여 사용해 보세요
Margin - 단축 속성코드를 단축하려면 사용이 가능하다 속성 중간 여백 모든 여백 속성이 지정되었습니다. 이를 약어 속성이라고 합니다.
모든 여백 속성의 약어 속성은 "margin"입니다.
예 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>프로그램을 실행하여 사용해 보세요.
margin 속성은 1~4개의 값을 가질 수 있습니다.
margin: 25px 50px 75px 100px;상단 여백은 25px
오른쪽 여백은 50px
하단 여백은 75px
왼쪽 여백은 100px
:25px 50px px;
상단 여백 약 25px
여백은 50px
하단 여백은 75px
: 25px 50px;
all 4개의 여백은 모두 25px
예제 더보기
여백 설정 센티미터와 백분율 값을 사용하여 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网（php.cn）</title>
<style>
p{background-color: #8de943
}
p.ex1 {margin-top:2cm;}
p.bottommargin {margin-bottom:25%;}
</style>
</head>
<body>
<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个2厘米上边距的段落。</p>
<p class="bottommargin">这是一个用百分比设置的下边距大小的段落。</p>
</body>
</html>프로그램을 실행하여 사용해 보세요
