Block

• 블럭의 형태로 공간을 분할하며, 한 줄을 통째로 차지하는 요소를 의미합니다.
• 대표적으로 div 태그입니다.
• 패딩과 마진이 상하좌우로 먹습니다.

Inline

• 자신의 영역만큼만 차지하여 공간을 분할하며, 줄 내에서 블럭이 쌓이듯이 공간을 분할하는 요소를 의미합니다.
• 대표적으로 input, a, p, span 태그입니다.
• 패딩과 마진이 좌우로만 먹습니다.
• 자신의 영역만큼만 차지하므로 width와 height가 먹지 않습니다.

Inline Block

• Inline, Block의 요소를 모두 뛰는 요소입니다.
• 대표적으로 img 태그입니다.
• 패딩과 마진이 상하좌우로 먹습니다.
• width, height는 block 요소의 특징을 따르며, 한 줄에 표현되는건 inline 요소의 특징을 따릅니다.

html5 시맨틱 태그

• div 태그와 동일하나, 가독성을 높혀주고 의미론적인 태그이며 검색엔진이 해당 웹페이지를 분석할때 용이하다.

• 대표적으로 header, footer, aside, section, article, nav 태그입니다.