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의 특징)
'> HTML-CSS' 카테고리의 다른 글
[HTML/CSS] position의 속성 5가지 (static, relative, absolute, fixed, sticky) (0) | 2020.12.29 |
---|---|
[HTML/CSS] class, id 각각 언제 쓰는 것이 좋을까? (0) | 2020.11.05 |
[HTML] `<meta http-equiv="X-UA-Compatible" content="ie=edge">` (0) | 2020.11.04 |
[CSS] padding 기본 사용법 (0) | 2020.10.29 |
[CSS] margin 기본 사용법, margin 중복(중첩) (0) | 2020.10.29 |
댓글