Normal flow

기호 설명

A | B: A 또는 B 중의 하나이다.

Block-level layout

Block-level box(block-level element의 내용이 들어가는 눈에 보이지 않는 상자. Box dimensions 참고.)는 수직으로 배열된다. 두 box 사이의 간격은 margin 속성에 의해 결정된다.

두 개의 block-level box가 수직으로 만날 때, 윗쪽 box의 margin-bottom과 아랫쪽 box의 margin-top은 겹쳐진다.

Inline layout

Inline box(inline element의 내용이 들어가는 눈에 보이지 않는 상자.)는 수평으로 배열된다. 두 box 사이의 간격은 margin 속성에 의해 결정된다.

Inline box의 가로 정렬 방식은 alignment 속성으로 지정한다.

Inline box가 들어갈 수 있는 공간의 넓이보다 inline box의 폭이 넓을 때는(브라우저 창의 크기가 작다거나, BLOCKQUOTE 안에 포함되는 inline box인데 BLOCKQUOTE의 폭보다 넓다거나 등등) 여러 줄로 나뉘어 진다.

여러 개의 높이가 서로 다른 inline box가 한 줄에 나타날 때, vertical-align 속성으로 수직 배열 위치를 지정할 수 있다.

display: block | inline | list-item | run-in | compact | none

CSS2는 모든 element를 기본적으로 block-level로 간주하고, display 속성을 이용해 변경할 수 있도록 하고 있다. 그러나, HTML의 경우, block-level과 inline element가 정해져 있고, 대부분의 브라우저도 기본 스타일시트에서 이것을 그대로 적용하고 있다. 게다가 Display 속성은 아직 제대로 지원되지도 않는다. 참고로, list-item은 LI element에 기본적으로 적용되는 값이다.