CSS

[CSS] Padding(내부여백)

katia 2023. 3. 8. 16:10

Padding

  • 요소의 내부여백을 지정하기 위해 사용한다.
  • 속성값 : [크기]
  • 속성구조
    • [x] : 상/하/좌/우 모두 x 를 부여한다.
    • [x] [y] : 상/하에 대해 x 를, 좌/우에 대해 y를 부여한다.
    • [a] [b] [c] [d] : 상/하/좌/우를 a,b,c,d 순으로 부여한다.

상/하/좌/우 따로 값을 줄 때

1) padding-top

  • 위쪽의 내부여백을 지정하기 위해 사용한다.
  • 속성값 : [크기]

2) padding-right

  • 오른쪽의 내부여백을 지정하기 위해 사용한다.
  • 속성값 : [크기]

3) padding-bottom

  • 아래쪽의 내부여백을 지정하기 위해 사용한다.
  • 속성값 : [크기]

4) padding-left

  • 왼쪽의 내부여백을 지정하기 위해 사용한다.
  • 속성값 : [크기]

형식

[Tag] or [.class] or [#id] {

    padding : [크기1] [크기2] [크기3] [크기4];
    /* 위와 아래 내용은 동일 */
    padding-top : [크기1];
    padding-right : [크기2];
    padding-bottom : [크기3];
    padding-left : [크기4];

}

'CSS' 카테고리의 다른 글

[CSS] Text  (0) 2023.03.09
[CSS] Font  (1) 2023.03.09
[CSS] Margin(외부 여백)  (0) 2023.03.08
[CSS] Position  (0) 2023.03.08
[CSS] Display  (0) 2023.03.08