> HTML-CSS
[HTML] Block 요소와 Inline 요소, 그리고 Inline-block 요소
bky373
2020. 10. 25. 11:15
1. Block 요소
- 예) div, h1~6, p, form, section, article, aside 등
- 사용 가능한 최대 가로 너비를 사용한다
- 크기 지정 가능하다 (width: 100%; height:0; 으로 시작)
- 수직으로 쌓인다
- margin, padding 위, 아래, 좌, 우 모두 사용 가능하다
- 레이아웃 용도로 쓰인다
- 단, display: inline; 을 사용하면 아래의 인라인처럼 사용 가능하다
2. Inline 요소
- 예) span, img, a, button, label, textarea 등
- 내용 만큼의 너비를 사용한다
- 크기 지정 불가능하다 (width: 0; height:0; 으로 시작)
- 수평으로 쌓인다
- margin, padding 좌, 우만 사용 가능하다
- 텍스트 용도로 쓰인다
- 단, display: block; 을 사용하면 위의 블록처럼 사용 가능하다
3. Inline-block 요소
- 예) input 등
- 기본 베이스는 inline이어서 수평으로 쌓인다 (역시 TEXT를 다루는 데 특화됨)
- width, height 값을 가질 수 있다 (block의 특징)
- margin, padding도 (상하좌우 모두) 사용할 수 있다 (block의 특징)