목차
- padding 예제 - 안쪽 여백
- padding 정의
- padding 구문
- padding 속성값 개수별 의미
- padding 개별 지정
- padding vs. margin 비교 ★★★★★
padding 예제 - 안쪽 여백
[padding 적용 O]
<style>
div {
border:1px solid red;
padding: 30px;
}
</style>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
[padding 적용 X]
<style>
div {border:1px solid red;}
</style>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
padding 정의
요소 안쪽 여백 일괄 지정.
1.
margin, padding, border 값은 요소 너비에 포함. 관련 내용 보기
2. cf.
- padding 속성: 0 이상 양수만 가능.
- margin 속성: 음수 (= 역마진)도 가능
3.
background-color 속성의 영향 받음. (즉, padding 부분도 배경색 반영.)
4.
브라우저마다 요소 별로 조금씩 padding, margin 값이 다르므로, 크로스브라우징 (= 모든 브라우저에서 동일 화면) 위해 최기화 설정 필요.
(예제) selector {margin:0; padding:0}
5.
- 기본값: 0
- 상속여부: X
- 애니효과: O
- CSS버전: CSS1
- JS구문: object.style.padding="100px 20px"
6.
padding 구문
selector {padding:속성값; }
[속성값]
length
길이 단위. (예: px, pt, em, cm, % 단위 등)
- [주의] - % 단위 경우, 부모요소의 너비를 기준으로 계산됨. 만약, 부모요소가 없는 경우, body 요소 너비를 기준으로 계산됨.
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
padding 속성값 개수별 의미
※ margin 속성도 마찬가지.
1개: (상우하좌) 일괄지정
div {padding: 10px;}
2개 : (상하/좌우)
div {padding: 10px 20px;}
3개 : (상/좌우/하)
div {padding: 10px 20px 30px;}
4개 : (상/우/하/좌) 개별지정
div {padding: 10px 20px 30px 40px;}
padding 개별 지정
padding 속성 이용해 상우하좌를 한번에 정의할 수 있지만,
아래처럼 개별 정의도 가능하며, 한쪽만 정의하는 것도 가능.
- 선택자 {padding-top: 10px;} /* 상단 안쪽 여백 */
- 선택자 {padding-right: 20px;} /* 우측 안쪽 여백 */
- 선택자 {padding-bottom: 30px;} /* 하단 안쪽 여백 */
- 선택자 {padding-left: 40px;} /* 좌측 안쪽 여백 */
padding vs. margin 비교 ★★★★★
padding
요소 내부의 왼쪽 상단 기준으로 내용이 얼마나 멀리 위치하나 지정.
padding 속성은 요소의 background-color 속성의 영향을 받음.
margin
요소 바깥의 요소 (바깥에 요소 없을 시 브라우저 왼쪽 상단) 기준으로
요소가 얼마나 멀리 위치하나 지정.
margin 속성은 요소의 background-color 속성 영향을 받지 않음,
관련 예제 보기
[내부스타일방식] (권장) ★
<style>
.margin_ex {
margin: 10px 20px 30px 40px;
border: 1px solid #333333;
}
.padding_ex {
padding: 10px 20px 30px 40px;
border: 1px solid #333333;
}
</style>
<div class='margin_ex'>
<p>margin 홈짱닷컴 (homzzang.com)</p>
</div>
<div class='padding_ex'>
<p>margin 홈짱닷컴 (homzzang.com)</p>
</div>
[인라인방식]
<div style="margin: 10px 20px 30px 40px; border: 1px solid #333333;">
<p>margin 홈짱닷컴 (homzzang.com)</p>
</div>
<div style="padding: 10px 20px 30px 40px; border: 1px solid #333333;">
<p>margin 홈짱닷컴 (homzzang.com)</p>
</div>
결과 보기
※ HTML, CSS의 구조적 분리 차원에서, 내부스타일 방식 권장.
