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
부모 요소의 이 속성값 상속받기
