1. 패딩(padding)

  - 내용(content)과 테두리(border) 사이의 간격이다. 

  - 패딩은 눈에 보이지 않는다.

  

2. 패딩의 속성

  - 패딩의 속성은 top, right, bottom, left 순으로 설정한다.

 

2-1 1개의 padding 속성값을 가질 때

ex) padding: 5px;

=> padding-top: 5px

     padding-right: 5px

     padding-bottom: 5px

     padding-left: 5px

 

2-2 2개의 padding 속성값을 가질 때

ex) padding: 10px 20px;

=> padding-top: 10px

     padding-right: 20px

     padding-bottom: 10px

     padding-left: 20px

 

2-3 3개의 padding 속성값을 가질 때

ex) padding: 10px 20px 30px;

=> padding-top: 10px

     padding-right: 20px

     padding-bottom: 30px

     padding-left: 20px

 

2-4 4개의 padding 속성값을 가질 때

ex) padding: 10px 20px 30px 40px;

=> padding-top: 10px

     padding-right: 20px

     padding-bottom: 30px

     padding-left: 40px

 

'FrontEnd > Css' 카테고리의 다른 글

[CSS] 마진(margin)  (0) 2021.07.27
[CSS] 테두리(border)  (0) 2021.07.27
[CSS] 크기 및 한계 설정  (0) 2021.07.25
[CSS] 링크(link), 리스트(list), 테이블(table)  (0) 2021.07.24
[CSS] 글꼴  (0) 2021.07.24