블록 요소
- div, ul, ol, li, h, hr, form, dl, dt, dd, p, table,
header, article, footer, section, nav, details, summury, center - 사용 가능한 최대 가로 너비를 사용한다.
- 크기를 지정할 수 있다.
- 기본 너비값은 width: 100%; height: 0; 로 시작
- 수직으로 쌓임 → 한줄에 한개만 배치
- margin, padding, 상,하,좌,우 사용 가능하다. → 크기 지정 O
- 레이아웃
인라인 요소
- span, a, small, em, b, br, audio, video, s, u, mark, q,
strong, sup, sub, i, big, del, label - width: 0; height: 0; 로 시작
- 수평으로 쌓임 → 한줄에 여러개 배치
- margin, padding 상,하 사용 할 수 없다. → 크기 지정 X
- 기본 너비값은 컨텐츠의 너비값 (텍스트)
- before:: after::는 기본적으로 인라인요소
+인라인 블록 요소
- img, input, button, fontawesome icon
- 수평으로 쌓임 → 한줄에 여러개 배치
- 상,하,좌,우,margin 모두 가짐 → 크기 지정 O
- 기본 너비값은 컨텐츠의 너비값 (텍스트)
- 어떤 요소이건 position: absolute 또는 fixed가 적용되면 인라인블록으로 변함.
