---
title: CSS Logical Properties and Values
slug: Web/CSS/CSS_Logical_Properties
tags:
  - CSS
  - CSS Logical Properties
  - Overview
  - Reference
translation_of: Web/CSS/CSS_Logical_Properties
---
<div>{{CSSRef}}</div>

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

<h3 id="블록과_인라인">블록과 인라인</h3>

<p>Logical properties and values use the abstract terms <em>block</em> and <em>inline</em> to describe the direction in which they flow. The physical meaning of these terms depends on the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a>.</p>

<dl>
 <dt><a id="블록_치수" name="블록_치수">블록 치수</a></dt>
 <dd>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.</dd>
 <dt><a id="인라인_치수" name="인라인_치수">인라인 치수</a></dt>
 <dd>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.</dd>
</dl>

<h2 id="참고서">참고서</h2>

<h3 id="크기_속성">크기 속성</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("max-block-size")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("max-inline-size")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li>
</ul>
</div>

<h3 id="안팎_여백_테두리_속성">안팎 여백, 테두리 속성</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-start")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-start")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-style")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-inline-width")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("padding-inline")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li>
</ul>
</div>

<h3 id="플로트와_위치_속성">플로트와 위치 속성</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} keywords)</span></li>
 <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} keywords)</span></li>
 <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset-block-start")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset-inline")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li>
 <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li>
</ul>
</div>

<h3 id="기타_속성">기타 속성</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} keywords)</span></li>
 <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (<code>block</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline</code> {{Experimental_Inline}} keywords)</span></li>
 <li>{{CSSxRef("text-align")}} (<code>end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>start</code> {{Experimental_Inline}} keywords)</span></li>
</ul>
</div>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">설명</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Logical Properties')}}</td>
   <td>{{Spec2('CSS Logical Properties')}}</td>
   <td>초기 정의</td>
  </tr>
 </tbody>
</table>