w3.css
패딩
w3-padding-large
상하 패딩 12px, 좌우 패딩 24px가 있다.
Padding number 클래스
w3-padding-number 클래스는 HTML 요소에 상단 및 하단 패딩을 추가한다.
| Class | Defines |
|---|---|
| w3-padding-16 | 요소에 16px 상단 및 하단 패딩을 추가한다. |
| w3-padding-24 | 요소에 24px 상단 및 하단 패딩을 추가한다. |
| w3-padding-32 | 요소에 32px 상단 및 하단 패딩을 추가한다. |
| w3-padding-48 | 요소에 48px 상단 및 하단 패딩을 추가한다. |
| w3-padding-64 | 요소에 64px 상단 및 하단 패딩을 추가한다. |
w3-padding-16
16px 상단 및 하단 패딩이 있다.
w3-padding-24
24px 상단 및 하단 패딩이 있다.
w3-padding-32
32px 상단 및 하단 패딩이 있다.
w3-padding-48
48px 상단 및 하단 패딩이 있다.
w3-padding-64
64px 상단 및 하단 패딩이 있다.
예제
<div class="w3-panel w3-padding-16"> <p>I have 16px top and bottom padding.</p> </div>
W3.CSS 패딩 크기 클래스
w3-padding-size 클래스는 HTML 요소에 위쪽, 아래쪽, 오른쪽 및 왼쪽 패딩을 추가한다.
| Class | Defines |
|---|---|
| w3-padding | 위쪽 및 아래쪽 8px, 왼쪽 및 오른쪽 패딩 16px 추가한다. |
| w3-padding-small | 위쪽 및 아래쪽 4px, 왼쪽 및 오른쪽 패딩 8px 추가한다. |
| w3-padding-large | 위쪽과 아래쪽에 12px, 왼쪽과 오른쪽에 24px 패딩을 추가한다. |
w3-padding-small
4px 상단 및 하단 패딩과 8px 왼쪽 및 오른쪽 패딩이 있다.
w3-padding
8px 상단 및 하단 패딩과 16px 왼쪽 및 오른쪽 패딩을 가지고 있다.
w3-padding-large
12px 상단 및 하단 패딩과 24px 왼쪽 및 오른쪽 패딩이 있다.
예제
<div class="w3-panel w3-padding-large"> <p>I have 12px top and bottom padding and 24px left and right padding.</p> </div>
참고
W3C School - W3.CSS Padding
공부 목적 블로그