목차
- padding-block 예제 - 블락방향 안 여백 지정
- padding-block 정의
- padding-block 구문
- padding-block 예제 - writing-mode 속성으로 블락방향 변경
padding-block 예제 - 블락방향 안 여백 지정
[예제1] - 속성값이 1개인 경우, 블락방향 시작과 끝 안 여백을 한번에 지정.
<style>
p {
border: 1px solid gray;
background-color: pink;
}
p.hz {
padding-block: 100px;
}
</style>
<p class="hz">홈짱닷컴 Homzzang.com</p>
<p>홈짱닷컴 Homzzang.com</p>
결과보기
[예제2] - 속성값이 2개인 경우, 블락방향 시작과 끝 안 여백을 각각 지정.
<style>
p {
border: 1px solid gray;
background-color: pink;
}
p.hz {
padding-block: 50PX 100px;
}
</style>
<p class="hz">홈짱닷컴 Homzzang.com</p>
<p>홈짱닷컴 Homzzang.com</p>
결과보기
padding-block 정의
블락방향 시작과 끝의 패딩(=안 여백) 지정. (즉, 아래 속성을 일괄 지정.)
1. 속성값 개수별 의미
- 속성값이 2개인 경우 (예) padding-block: 50px 100px; - padding-block-start 속성의 값은 50px, padding-block-end 속성의 값은 100px
- 속성값이 1개인 경우 (예) padding-block: 50px; - padding-block-start 속성과 padding-block-end 속성의 값 모두 50px
2.
3.
- 기본값: auto
- 상속여부: X
- 애니가능: O
- CSS버전: CSS3
- JS구문: object.style.paddingBlock="100px";
4.
IE 제외한 주요 최신 브라우저 모두 지원.
5. MDN padding-block 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block
padding-block 구문
selector {padding-block: auto|length|%|initial|inherit;}
[속성값]
auto
브라우저가 자동 지정. (기본값)
length
px, pt, cm 등의 길이단위 사용해 지정. (음수값 허용 X)
%
인라인 방향의 상위요소 크기를 기준해 백분율로 지정.
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속.
padding-block 예제 - writing-mode 속성으로 블락방향 변경
<style>
p {
border: 1px solid gray;
background-color: pink;
}
p.hz {
writing-mode: vertical-rl;
padding-block: 100px;
}
</style>
<p class="hz">홈짱닷컴 Homzzang.com</p>
<p>홈짱닷컴 Homzzang.com</p>
결과보기
