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

[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)

분류 제목
box CSS - padding 속성 ★ - 안쪽여백 (= padding속성 = 패딩속성)
box CSS - padding-top 속성 - 안쪽여백상단 (= padding-top속성 = 패딩탑속성 = 패딩톱…
box CSS - padding-right 속성 - 안쪽여백우측 (= padding-right속성 = 패딩라이트속…
box CSS - padding-bottom 속성 - 안쪽여백하단 (= padding-bottom속성 = 패딩바텀속…
box CSS - padding-left 속성 - 안쪽여백좌측 (= padding-left속성 = 패딩레프트속성)
position CSS - float 속성 ★★★ - 요소나란히 (= 요소한줄로 = 요소가로로 = 요소옆으로 = float속…
position CSS - clear 속성 ★ - float 해제후 줄바꿈 (= 클리어속성, clear속성, 상속 X)
position CSS - display 속성 ★★★★★ - 요소유형지정 (= 요소성격변 = 요소노출방식 = display속…
position CSS - position 속성 ★★★ - 위치기준대상지정 (= 위치속성 = 포지션속성 = 위치조정 = po…
position CSS - top 속성 ★ - 기준상단 (= 위기준 상단거리 = top속성 = 탑속성/톱속성)
position CSS - right 속성 ★ - 오른쪽기준(= 우측기준) 위치 지정 (= right속성 = 라이트속성) ※…
position CSS - bottom 속성 ★ - 기준하단 (= bottom속성 = 하단기준 = 아래기준 = 바텀속성 = …
position CSS - left 속성 ★ - 왼쪽기준 (= left속성 = 좌측기준 = 레프트속성, 상속 X)
position CSS - z-index 속성 ★ - 요소층수지정 (= 요소상하지정 = 요소상하결정 = 위아래지정 = z-…
position CSS - visibility 속성 ★ - 보임설정 (= 노출설정 = visibility속성 = 비저빌러티속…
position CSS - overflow 속성 ★★ - 범위이탈요소처리 (= 범위넘는요소처리 = 스크롤바 생성 = over…
position CSS - clip 속성 (폐기예고) - 이미지 자르기 (= 일부만 노출 = clip속성 = 클립속성)
css CSS - cursor 속성 - 커서 모양 (= cursor속성 = 커서속성)
intro CSS - !important 키워드 - 당해 속성값 강제 우선적용 (= 우선순위표시 = 느낌표임포턴트)
css CSS - opacity 속성 - 불투명도 (= opacity속성 = 오패서티속성/오페서티속성) ※ 있는데 …
6/25
목록
찾아주셔서 감사합니다. Since 2012