CSS Logical Properties and Values

CSS Logical Properties and Values는 레이아웃을 제어하는 물리 속성에 논리 맵핑을 정의하는 CSS 모듈입니다.

블록과 인라인

Logical properties and values use the abstract terms block and inline to describe the direction in which they flow. The physical meaning of these terms depends on the writing mode.

블록 치수
The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.
인라인 치수
The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.

참고서

크기 속성

  • block-size This is an experimental API that should not be used in production code.
  • inline-size This is an experimental API that should not be used in production code.
  • max-block-size This is an experimental API that should not be used in production code.
  • max-inline-size This is an experimental API that should not be used in production code.
  • min-block-size This is an experimental API that should not be used in production code.
  • min-inline-size This is an experimental API that should not be used in production code.

안팎 여백, 테두리 속성

  • border-block This is an experimental API that should not be used in production code.
  • border-block-color This is an experimental API that should not be used in production code.
  • border-block-end This is an experimental API that should not be used in production code.
  • border-block-end-color This is an experimental API that should not be used in production code.
  • border-block-end-style This is an experimental API that should not be used in production code.
  • border-block-end-width This is an experimental API that should not be used in production code.
  • border-block-start This is an experimental API that should not be used in production code.
  • border-block-start-color This is an experimental API that should not be used in production code.
  • border-block-start-style This is an experimental API that should not be used in production code.
  • border-block-start-width This is an experimental API that should not be used in production code.
  • border-block-style This is an experimental API that should not be used in production code.
  • border-block-width This is an experimental API that should not be used in production code.
  • border-color (logical This is an experimental API that should not be used in production code. keyword)
  • border-inline This is an experimental API that should not be used in production code.
  • border-inline-color This is an experimental API that should not be used in production code.
  • border-inline-end This is an experimental API that should not be used in production code.
  • border-inline-end-color This is an experimental API that should not be used in production code.
  • border-inline-end-style This is an experimental API that should not be used in production code.
  • border-inline-end-width This is an experimental API that should not be used in production code.
  • border-inline-start This is an experimental API that should not be used in production code.
  • border-inline-start-color This is an experimental API that should not be used in production code.
  • border-inline-start-style This is an experimental API that should not be used in production code.
  • border-inline-start-width This is an experimental API that should not be used in production code.
  • border-inline-style This is an experimental API that should not be used in production code.
  • border-inline-width This is an experimental API that should not be used in production code.
  • border-start-start-radius This is an experimental API that should not be used in production code.
  • border-start-end-radius This is an experimental API that should not be used in production code.
  • border-end-start-radius This is an experimental API that should not be used in production code.
  • border-end-end-radius This is an experimental API that should not be used in production code.
  • border-style (logical This is an experimental API that should not be used in production code. keyword)
  • border-width (logical This is an experimental API that should not be used in production code. keyword)
  • margin (logical This is an experimental API that should not be used in production code. keyword)
  • margin-block This is an experimental API that should not be used in production code.
  • margin-block-end This is an experimental API that should not be used in production code.
  • margin-block-start This is an experimental API that should not be used in production code.
  • margin-inline This is an experimental API that should not be used in production code.
  • margin-inline-end This is an experimental API that should not be used in production code.
  • margin-inline-start This is an experimental API that should not be used in production code.
  • padding (logical This is an experimental API that should not be used in production code. keyword)
  • padding-block This is an experimental API that should not be used in production code.
  • padding-block-end This is an experimental API that should not be used in production code.
  • padding-block-start This is an experimental API that should not be used in production code.
  • padding-inline This is an experimental API that should not be used in production code.
  • padding-inline-end This is an experimental API that should not be used in production code.
  • padding-inline-start This is an experimental API that should not be used in production code.

플로트와 위치 속성

  • clear (inline-end This is an experimental API that should not be used in production code. and inline-start This is an experimental API that should not be used in production code. keywords)
  • float (inline-end This is an experimental API that should not be used in production code. and inline-start This is an experimental API that should not be used in production code. keywords)
  • inset This is an experimental API that should not be used in production code.
  • inset-block This is an experimental API that should not be used in production code.
  • inset-block-end This is an experimental API that should not be used in production code.
  • inset-block-start This is an experimental API that should not be used in production code.
  • inset-inline This is an experimental API that should not be used in production code.
  • inset-inline-end This is an experimental API that should not be used in production code.
  • inset-inline-start This is an experimental API that should not be used in production code.

기타 속성

  • caption-side (inline-end This is an experimental API that should not be used in production code. and inline-start This is an experimental API that should not be used in production code. keywords)
  • resize This is an experimental API that should not be used in production code. (block This is an experimental API that should not be used in production code. and inline This is an experimental API that should not be used in production code. keywords)
  • text-align (end This is an experimental API that should not be used in production code. and start This is an experimental API that should not be used in production code. keywords)

명세

명세 상태 설명
CSS Logical Properties and Values Level 1 Editor's Draft 초기 정의