[HTML/CSS] CSS의 Padding속성

TIP/Blog 2017. 9. 16. 13:30

본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요.

▶관련 포스팅◀

Padding은 Border와 Content사이의 여백을 관리하는 안쪽여백입니다.

각 변을 따로 지정 할 수 있으며 다음과 같이 사용합니다.

* Padding-Top

* Padding-Bottom

* Padding-Left

* Padding-Right

Padding

태그	속성	속성값	비고
style	Padding	여백값	px, %, em 등

안쪽여백의 두께를 지정합니다.

각 변 마다 따로 지정해 줄수 있습니다.

예) p {padding-left: 30px}

코드 단축 을 위해 각 변을 규칙에 따라 한줄로 작성 할 수도 있습니다.

예) p {padding: 10px 20px 30px 40px;} 네가지 입력: top-right-bottom-left로 시계방향 순서입니다.

예) p {padding: 10px 20px 40px;} 세가지 입력: top-left&right-bottom으로 좌우가 같습니다.

예) p {padding: 10px 40px;} 두가지 입력: top&bottom-left&right로 상하가 같고 좌우가 같습니다.

Border에서 설명 했으며 어렵지 않으니 예제는 생략합니다.

< 연습하기 >

w3스쿨 js피들

'TIP/Blog' 관련 글 more

Posted by 옹봉이