본문 바로가기
> HTML-CSS

[HTML] Block 요소와 Inline 요소, 그리고 Inline-block 요소

by bky373 2020. 10. 25.

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의 특징)

댓글