[box] CSS - padding-top 속성 - 안쪽여백상단 (= padding-top속성 = 패딩탑속성 = 패딩톱속성) (상속 X)

padding-top 예제

 

display:inline-block 추가해 padding-top 값이 제대로 작동하는 경우

 

<style>

span {

  border: 1px solid red; 

  padding-top: 50px;

  display:inline-block;

}

</style>

 

<span>홈짱닷컴 Homzzang.com</span>

 

결과보기

---

 

display:inline-block 추가 안 해서 padding-top 값이 제대로 작동 않는 경우

<style>

span {

  border: 1px solid red; 

  padding-top: 50px;

}

</style>

<span>홈짱닷컴 Homzzang.com</span>

 

결과보기

---

 

※ %, em 등 여러 단위로 테스트 권장

 

[주의]

padding-top 속성 경우 display:inline-block 추가해야 padding 값 제대로 다 먹힘.

padding-right, padding-bottom, padding-left 경우엔 추가 안 해도 값이 잘 먹힘.

 

padding-top 정의

 

안쪽상단여백 (= 상단안쪽여백)

 

---

1.
인라인 요소 경우, display:inline-block 속성도 함께 추가해야 정상 작동함.

2.
음수값 허용 X

3.

기본값: 0

상속여부 :  X

애니효과:O

CSS버전:CSS1

JS 구문 : object.style.paddingTop = "50px"

4.
대부분 최신 브라우저 모두 지원

 

padding-top 구문

selector {padding-top: 속성값;}

 

---

 

[속성값]

 

길이 단위
px, pt, cm 등 단위의 고정 길이. 기본값은 0. 

% 단위
요소 너비의 % (=백분율) 지정.

 

initial
이 속성의 기본값 지정. 즉, 0으로 설정.

 

inherit

부모 요소의 이 속성값 상속받기