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

[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

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

 


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

분류 제목
table CSS - border-collapse 속성★ - 테두리겹침설정 (= 테두리중첩설정 = 테두리이중방지 = b…
table CSS - border-spacing 속성 - 테이블셀 테두리간격 (= border-spacing속성 = 보…
table CSS - caption-side 속성 - 테이블표제위치 (= caption-side속성 = 캡션사이드속성)
css CSS - 글자자르기 (= 문자열자르기 = 문자열줄이기= 글자길이자르기 = 문자열자르기 = 글자수자르기 = …
css CSS - zoom 속성 - 요소 확대 (= zoom속성 = 줌속성) ※ IE 하위 브라우저(예: IE6, …
intro CSS - CSS3 입문
intro CSS - 브라우저 접두어 (= vendor prefix = 벤더 프리픽스)
border CSS - border-radius 속성 ★ - 테두리둥글기 지정 (= border-radius속성 = 보더…
border CSS - border-top-left-radius 속성 - 테두리상단왼쪽둥글기 지정 (= 보더탑레프트레이디…
border CSS - border-top-right-radius 속성 - 테두리상단우측둥글기 지정 (= 보더탑라이트레이…
border CSS - border-bottom-right-radius 속성 - 테두리 하단 오른쪽 모서리 둥글게 (= …
border CSS - border-bottom-left-radius 속성 - 테두리하단왼쪽모서리둥글게 (= border…
border CSS - border-image 속성 - 테두리이미지 (= border-image속성 = 보더이미지속성, …
border CSS - border-image-source 속성 - 테두리 이미지 주소 (= border-image-so…
border CSS - border-image-slice 속성 - 테두리이미지자르기 (IE11)
border CSS - border-image-width 속성 - 테두리 이미지 너비 (= border-image-wid…
border CSS - border-image-outset 속성 - 테두리 경계 넘는 이미지 양. (= 보더이미지아웃셋속…
border CSS - border-image-repeat 속성 - 테두리 이미지 반복할지 늘릴지 선택 (= 보더이미지리…
background CSS - background-clip 속성 - 배경영역 (= background-clip속성 = 백그라운드…
background CSS - background-origin 속성 - 배경이미지 좌표시작점 (= 백그라운드오리진 속성)
7/25
목록
찾아주셔서 감사합니다. Since 2012