[box] CSS - padding-block 속성 - 블락방향 안 여백 일괄 지정 (= padding-block속성 = 패딩블락속성/패딩블럭속성/패딩블록속성)

1. padding-block 예제 - 블락방향 안 여백 지정
2. padding-block 정의
3. padding-block 구문
4. 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 정의

 

블락방향 시작과 끝의 패딩(=안 여백) 지정. (즉, 아래 속성을 일괄 지정.)

• padding-block-start 속성 - 블락방향 시작 부분의 안 여백
• padding-block-end 속성 - 블락방향 끝 부분의 안 여백

  

---

 

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.

• (padding-block / padding-inline) 속성은 padding-top, padding-bottom, padding-left, padding-right 속성과 매우 유사하나 padding-block 및 padding-inline 속성은 (블록/인라인) 방향에 따라 달라짐.
• writing-mode 속성 사용해 (블락/인라인) 방향 변경 가능.

 

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>

 

결과보기