padding 은 안쪽의 여백을 설정합니다.
DIV 의 padding
보기
padding:10px;
padding:20px;
padding:30px;
소스
<div style="border:1px solid silver; padding:10px;">padding:10px;</div>
<div style="border:1px solid silver; padding:20px;">padding:20px;</div>
<div style="border:1px solid silver; padding:30px;">padding:30px;</div>
설명
지정된 수치만큼 내부에 여백이 생깁니다.
실습 - 2개의 속성값 조절하기
보기
설명
- 첫번째 값은 위, 아래 수치
- 두번째 값은 오른쪽, 왼쪽 수치
실습 - 3개의 속성값 조절하기
보기
설명
- 3개일때는 위, 오른쪽 왼쪽, 아래쪽 이 조절됩니다.
실습 - 4개의 속성값 조절하기
보기
^_^
padding :
padding : 1px 1px 1px 1px
CSS 공작소
설명
- 각 값은 시계방향으로 위, 오른쪽, 아래, 왼쪽 의 순서입니다.
실습 - 박스 모델 (Box Model) 이해 하기
보기
+ CSS 연구소 +
아래 슬라이더를 움직여 보세요.
설명
padding 과 width 의 관계
보기
width 300px
width 300px + padding 20px + 20px
width 260px + padding 20px + 20px
소스
<div style="background:#efefef; width:300px;">width 300px</div>
<div style="background:#efefef; width:300px; padding:20px;">width 300px + padding 20px + 20px</div>
<div style="background:#efefef; width:260px; padding:20px;">width 260px + padding 20px + 20px</div>
설명
- width 를 지정하여 사용할 경우에는 padding 도 별도로 계산되기 때문에 잘 맞춰주어야 합니다.
- width 가 300px 일때 padding 이 20px 라면.. 결과적으로 340px 가 됩니다.
- 300px 너비를 지정하고 싶을때 padding 좌우 합이 40px 이라면 260px 로 너비를 설정 하면됩니다.
- 이런 상황을 해결하기 위한
box-sizing 이 있습니다.
+ 관련 CSS +