• Q&A
  • 회원가입
  • 로그인

[box] CSS - padding 속성 ★ - 안쪽여백 (= padding속성 = 패딩속성)

4,606  
목차
  1. padding 예제 - 안쪽 여백
  2. padding 정의
  3. padding 구문
  4. padding 속성값 개수별 의미
  5. padding 개별 지정
  6. 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.
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, % 단위 등)
 
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의 구조적 분리 차원에서, 내부스타일 방식 권장.



찾아주셔서 감사합니다. Since 2012