본문 바로가기
웹코딩 배우기/· CSS

CSS 내부 여백 padding

by 닐기 2019. 10. 28.

 

내부 여백 padding은 margin과 사용 방법이 거의 99% 동일하다.

그러니 다음 글을 참고하면 된다.

 

2019/11/22 - [웹코딩 어려워/· CSS] - CSS 외부여백 margin

불러오는 중입니다...

 

padding에도 각각 값을 정할 수 있다.

padding-top

padding-right

padding-left

padding-bottom

 

margin과 똑같이 한번에 쓰자.

padding: 0 0 0 0; / 상-우-하-좌 / 단위는 px나 %를 많이 쓴다.

 

!!중요!!

컨텐츠 너비와 패딩 값은 합쳐진다.
예를 들어
.div {width: 200px; padding:20px;} 라면...
컨텐츠의 최종 크기는 220px이 된다.

컨텐츠 기본 지정 값을 유지하려면
.div {width: 200px; padding:20px; box-sizing: border-box;}
box-sizing: border-box; 태그를 추가하면 된다.