W3.CSS 여백
w3-margin 클래스는 요소의 모든 면에 16px 여백을 추가합니다.
W3.CSS 여백 클래스
W3.CSS는 다음과 같은 여백 클래스를 제공합니다.
| 등급 | 정의 |
|---|---|
| w3-마진 | 요소의 모든 면에 16px 여백을 추가합니다. |
| w3-margin-top | 요소에 16px 상단 여백을 추가합니다. |
| w3-여백-오른쪽 | 요소에 16px 오른쪽 여백을 추가합니다. |
| w3-margin-bottom | 요소에 16px 하단 여백을 추가합니다. |
| w3-여백-왼쪽 | 요소에 16px 왼쪽 여백을 추가합니다. |
| w3 섹션 | 요소에 16px 위쪽 및 아래쪽 여백을 추가합니다. |
여유
w3-margin 클래스는 요소 의 모든 면에 16px 여백을 추가합니다.
w3-margin 클래스는 요소 의 모든 면에 16px 여백을 추가합니다.
예시
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
여백 상단
w3-margin-top 클래스는 요소에 16px 상단 여백을 추가합니다 .
w3-margin-top 클래스 는 16px 상단 여백을 요소에 추가합니다.
예시
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
여백 하단
w3-margin-bottom 클래스는 요소에 16px 하단 여백을 추가합니다 .
w3-margin-bottom 클래스 는 요소 에 16px 하단 여백을 추가합니다.
예시
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
여백 왼쪽
w3-margin-left 클래스는 요소에 16px 왼쪽 여백을 추가합니다 .
w3-margin-left 클래스 는 요소 에 16px 왼쪽 여백을 추가합니다.
예시
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
여백 오른쪽
w3-margin-right 클래스는 요소에 16px 오른쪽 여백을 추가합니다 .
w3-margin-right 클래스 는 요소 에 16px 오른쪽 여백을 추가합니다.
예시
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
섹션
많은 HTML 요소에는 기본 상단 또는 하단 여백이 없습니다. 이러한 요소는 사이에 여백 없이 표시됩니다.
나는 블루
나는 녹색이다
w3-section 클래스는 요소를 분리하는 데 사용할 수 있습니다 .
HTML 요소에 16px 의 상단 및 하단 여백을 추가합니다 .
나는 블루
나는 녹색이다
예시
<div class="w3-container w3-section w3-blue">
<h1>I am
Blue</h1>
</div>
<div class="w3-container
w3-section
w3-green">
<h1>I am Green</h1>
</div>