CSS를 다루는데 요소들의 기본적인 크기와 위치를 결정하는 규칙에 관해 알고 있어야 한다.이것을 특징에 따라 구별하여 보면 이해하기가 쉽다.

요소들은 크게 블록(block)요소와 인라인(in-line) 요소로 구별한다. 이를 구별하는 기준으로 블록 요소는 욕심이 많은 듯 좌우를 모두 꽉 채우려 한다. 또한 블록 요소의 폭을 설정해도 하나의 행을 모두 차지 하듯 위에서 아래로만 쌓이지 수평적으로 어울리려 하지 않는다. 이에 인라인 요소는 자기의 내용 만큼의 크기를 차지하며 다른 요소와 좌우로 잘 어울리며 폭이 초과되면 아래로 내려온다.

블록 요소로 대표되는 것은 h1,h2~h6 이나 대표격으로 div가 있다. 이들 블록 요소는 좌우로 모두 채우고 존재하며, 나열시 위에서 아래의 순으로 요소들이 쌓인다. 비록 블록 요소에 작은 폭을 설정한다 하더라도 좌우로 나열되지 않으며 위애서 아래로 쌓인다.

블록 요소에서 폭의 초기값으로 갖는 'auto'는 100%와 다르다. 여백(padding, margin)과 테두리(border)의 값들을 설정하여도 알아서 채운 상태을 유지하면서 값들이 설정된다. 폭을 100%를 설정하게 된다면 이것은 해당 문서(또는 상위 요소 내부)의 폭을 초과하게 된다. 이러한 특징은 매우 유용한다.

이와 비교되는 것은 인라인 요소로, 대표적으로 span이 있다. b나 i와 같은 태그도 있다. 또한 다소 성격이 다른 img와 같은 요소가 있다. 인라인 요소는 다시 크게 2가지로 구별이 된다.

전자와 같이 자신의 내용(텍스트)를 그대로 담고 있어 표현되는 요소를 좁은 의미에서의 '인라인' 요소라고 하며, img와 같이 지정한 다른 것으로 대체되는 요소로 나누어 지며, 이것은 전자와 구별하여 인라인블록(inline-block) 요소라고 한다. 

'인라인블록' 요소는 보통의 '인라인' 요소와의 구별 실익이 있다. 전자의 인라인 요소는 좌우의 여백을 설정할 수 있으나, 상하의 여백이나 height 속성으로 높이를 설정할 수 없다. 반면 후자의 경우에는 마치 블록 요소처럼 상하의 여백과 높이를 결정할 수 있다.

이러한 요소들의 기본적인 특징을 구별했다면, 개별적인 각 요소들이 갖는 크기와 위치의 설정 이해에 도움이 될 것 같다.

또한 CSS에서는 이러한 요소의 기본적인 특성을, display 속성을 이용하여 바꿀 수가 있다.  가령 div에서 display 속성의 값을 inline으로 설정하면, 인라인 요소처럼 작동된다. 또한 보통의 '인라인'요소에서 display 속성의 값을 'inline-block'으로 설정하면 높이와 상하 여백을 설정할 수 있는 '인라인 블록'의 특징을 갖는 요소가 된다.

• 기타 이어 더보기 : CSS3 Flexible Box Layout Module