padding (내부 여백)

padding

- padding : 요소의 내부 여백을 지정하는 단축 속성 

• 요소의 크기가 커진다. 

    - init : 0  내부 여백 없음 

    - 단위 px em vw 등 단위로 지정 

    -  % :부모 요소의 가로 너비에 대한 비율로 지정 

 

단축 속성 

padding : top right bottom left (시계방향)

• padding- top ,padding-right, padding-bottom, padding-left의 개별속성을 합친 게 단축속성이다
• 띄어쓰기로 구분하며 값의 개수에 따라 값의 적용 위치가 다르다 

padding : 0   

- 내부 여백 없음 

 

padding 10px

-상하좌우  10px 만큼 내부 여백

 

padding 10px 20px

-상하 10px, 좌우 20px  만큼 내부 여백 

 

padding 10px 20px 30px

- 상 10px 좌우 20px 하 30px

 

padding 10px 20px 30px 40px

-상 10px 우 20px 하 30px 좌 40px 

 

 

코드펜 예제 

See the Pen padding by 김선미 (@tjsalsun) on CodePen.

/*   padding: 20px; */ 주석 풀경우 첫번째 item 내부 여백이 늘어난다. 

---

TIL

key point 

padding 설정시 요소가 커진다(내부 여백이 커짐으로)
 
느낀점

box-sizing일 때 어떻게 적용되는지 알아보기 

오늘의 학습 만족도 
⭐⭐⭐⭐⭐