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

1. padding 예제 - 안쪽 여백
2. padding 정의
3. padding 구문
4. padding 속성값 개수별 의미
5. padding 개별 지정
6. padding vs. margin 비교 ★★★★★

padding 예제 - 안쪽 여백 

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 구문

padding 속성값 개수별 의미

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의 구조적 분리 차원에서, 내부스타일 방식 권장.