| Inline | Block |
 |
 |
 |
 |
| a, img, span | h1~h6, p, div |
| 텍스트 align을 사용해서 정렬하기 | 수평정렬 margin control하기 |
| 어딘가에 들어갈 수 있는 박스 다른 요소를 수평방향으로 밀어낼 수 있지만, 위아래로 밀어낼 수는 없다. (이미지는 예외) |
무언가를 막는 박스 block을 컨트롤 하려면 수평방향을 컨트롤 해야한다. |
| 본인의 컨텐츠 영역만큼만 공간을 차지한다. 너비와 높이를 지정할 수 없다. (width, height) 새로운 행으로 나뉘지 않는다 수직방향 : padding, margins, borders가 적용되지만 다른 요소를 밀어낼 수는 없다 수평방향 : padding, margins, borders가 적용되어 다른 요소를 밀어낼 수 있다 |
항상 새로운 행으로 나뉜다 너비와 높이를 지정할 수 있다. (width, height) 기본적으로 width 속성을 기본으로 지정하지 않으면, 박스는 inline 방향으로 사용 가능한 공간을 모두 차지한다 (너비를 사용 가능한 공간의 100%로 채운다) |
▷ 추가 공부
* Normal Flow ( inline / block )
https://bayleaf07.tistory.com/182
* Inline box type
다른 요소를 수평방향으로 밀어낼 수 있지만, 위아래로 밀어낼 수는 없다.
https://bayleaf07.tistory.com/183
* Block type의 수평정렬 (h1~h6, p, div)
https://bayleaf07.tistory.com/184
* inline type의 수평정렬 (a, img, span)
'WEB > CSS_ concepts' 카테고리의 다른 글
| shorthand 속성 (border, margin, padding) (0) | 2024.03.07 |
|---|---|
| [CSS] display 속성 _ inline-block box type/ none box type (0) | 2024.03.07 |
| justify-items 및 justify-self 속성이 없는 이유 (0) | 2024.03.07 |
| 반응형 레이아웃 (0) | 2024.03.07 |
| [CSS Flexbox] Flex-basis (0) | 2024.03.07 |