[box] CSS - padding-block-start 속성 - 블락방향 시작 안 여백 지정 (= padding-block-start속성 = 패딩블락스타트속성/패딩블럭스타트속성/패딩블록스타트속성)

1. padding-block-start 예제 - 블락방향 시작 안 여백 지정
2. padding-block-start 정의
3. padding-block-start 구문
4. padding-block-start 예제 - writing-mode 속성으로 블락방향 변경

padding-block-start 예제 - 블락방향 시작 안 여백 지정

 

<style>

p {

  border: 1px solid gray;

  background-color: pink;

}

p.hz {

  padding-block-start: 100px;

}

</style>

<p class="hz">홈짱닷컴 Homzzang.com</p>

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

 

결과보기

padding-block-start 정의

 

블락방향 시작 부분의 패딩(=안 여백) 지정.

 

---

 

1.

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

 

2.

• 기본값: auto
• 상속여부: X
• 애니가능: O
• CSS버전: CSS3
• JS구문: object.style.paddingBlockStart="100px";

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

 

4. MDN padding-block-start 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start

 

padding-block-start 구문

 

selector {padding-block-start: auto|length|%|initial|inherit;}

 

---

[속성값]

 

auto

브라우저가 자동 지정. (기본값)

 

length

px, pt, cm 등의 길이단위 사용해 지정. (움수값 허용 X)

 

%

인라인 방향의 상위요소 크기를 기준해 백분율로 지정.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

padding-block-start 예제 - writing-mode 속성으로 블락방향 변경

 

<style>

p {

  border: 1px solid gray;

  background-color: pink;

}

p.hz {

  writing-mode: vertical-rl;

  padding-block-start: 100px;

}

</style>

<p class="hz">홈짱닷컴 Homzzang.com</p>

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

 

결과보기