목차
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. 관련 내용 보기 padding 속성: 0 이상 양수만 가능 . 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, % 단위 등)
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
padding 속성값 개수별 의미
※ margin 속성도 마찬가지.
1개 : (상우하좌) 일괄지정 div {padding: 10px ;}
2개 : (상하/ 좌우)
div {padding: 10px 20px;}
3개 : ( 상/ 좌우/ 하)
4개 : (상/우/하/좌) 개별지정
padding 개별 지정
padding 속성 이용해 상우하좌를 한번에 정의할 수 있지만,
선택자 { padding-top : 10px;} /* 상단 안쪽 여백 */ 선택자 { padding-right : 20px;} /* 우측 안쪽 여백 */ 선택자 { padding-bottom : 30px;} /* 하단 안쪽 여백 */ 선택자 { padding-left : 40px;} /* 좌측 안쪽 여백 */
padding vs. margin 비교 ★★★★★
padding
요소 내부의 왼쪽 상단 기준으로 내용이 얼마나 멀리 위치하나 지정.
padding 속성은 요소의 background-color 속성의 영향을 받음 . 요소 바깥의 요소 (바깥에 요소 없을 시 브라우저 왼쪽 상단) 기준으로 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의 구조적 분리 차원에서, 내부스타일 방식 권장.
