padding

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

padding 은 안쪽의 여백을 설정합니다.

예제 1
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>
사용된 CSS (클릭시 보기) : borderpadding
설명
지정된 수치만큼 내부에 여백이 생깁니다.
예제 2
실습 - 1개의 속성값 조절하기
보기
^_^
padding :
1px
padding : 1px
CSS 공작소
예제 3
실습 - 2개의 속성값 조절하기
보기
^_^
padding :
1px
1px
padding : 1px 1px
CSS 공작소
설명
- 첫번째 값은 위, 아래 수치
- 두번째 값은 오른쪽, 왼쪽 수치
예제 4
실습 - 3개의 속성값 조절하기
보기
^_^
padding :
1px
1px
1px
padding : 1px 1px 1px
CSS 공작소
설명
- 3개일때는 위, 오른쪽 왼쪽, 아래쪽 이 조절됩니다.
예제 5
실습 - 4개의 속성값 조절하기
보기
^_^
padding :
1px
1px
1px
1px
padding : 1px 1px 1px 1px
CSS 공작소
설명
- 각 값은 시계방향으로 위, 오른쪽, 아래, 왼쪽 의 순서입니다.
예제 6
실습 - 박스 모델 (Box Model) 이해 하기
보기
+ CSS 연구소 +
아래 슬라이더를 움직여 보세요.
margin :
0
margin 조절해보기
padding :
0
padding 조절해보기
border :
1px
border 조절해보기
설명
슬라이더를 움직여서 위 예제가 어떻게 바뀌는지 확인해 보세요 ^^
- margin : 바깥쪽 여백
- padding : 안쪽 여백
- border : 테두리
예제 7
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>
사용된 CSS (클릭시 보기) : backgroundpaddingwidth
설명
- width 를 지정하여 사용할 경우에는 padding 도 별도로 계산되기 때문에 잘 맞춰주어야 합니다.
- width 가 300px 일때 padding 이 20px 라면.. 결과적으로 340px 가 됩니다.
- 300px 너비를 지정하고 싶을때 padding 좌우 합이 40px 이라면 260px 로 너비를 설정 하면됩니다.
- 이런 상황을 해결하기 위한 box-sizing 이 있습니다.
 
+ 관련 CSS +