• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

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


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012