[html/css] padding 속성에 대하여...

 

 

html / css 에서 padding이라는 속성에 대해 알아보도록 하겠습니다.

padding은 margin과 거의 비슷합니다!

---

 

margin border padding content를 보기쉽게 나타낸 그림

 

 

padding 이란 본문 내용과 border 사이의 여백을 의미합니다..

 

 

padding은 4가지로 나뉘어 집니다.

-padding-top 상단여백
-padding-right 오른쪽여백
-padding-bottom 아래여백
-padding-left 왼쪽여백

 

 

 

style속성으로 padding을 사용하는 방법

*단위는 px, cm, % 등등 가능, 음수(-)도 가능

●한꺼번에 padding지정하는 방법
padding: ?px ?px ?px ?px; (상단 오른쪽 하단 왼쪽)

●4면 모두 동일한 여백일때 padding지정하는 방법
padding: ?px;

●상단, 오른&왼, 하단 순서 padding지정하기
padding: ?px ?px ?px; (상단 오른&왼 하단)

●상단&하단 오른&왼 순서 padding지정하기
padding: ?px ?px; (상단&하단 오른&왼)