block
- 한 줄을 혼자 다 차지하는 특성이 있음 (다른 엘리먼트를 다음 줄로 밀어버림)
ㄴ 내용의 크기와 상관 없이 너비 100% 차지, 높이는 내용의 크기만큼 차지함 - width, height 크기 지정 가능
- padding, margin 을 통한 상하좌우 여백 생성 가능
- block 태그:
div, p, h1~h6, ol, ul, dl, form, br, hr, adress, video,
blockquote, table, thead, tbody, tfoot, tr, th, td ...
inline
- 줄바꿈 없이 쭉 배치되며, 내용의 크기만큼 영역이 설정됨
- 크기, 여백 설정 불가
- inline 안에 block 요소를 사용할 수 없음
- inline 태그:
a, span, img, strong, b, i, em, input, button ...
inline-block
- block 속성과 inline 속성을 섞어 가짐
- 크기, 여백 설정 가능
- 여러 엘리먼트를 한 줄에 배치 가능
Web Publisher