block
- 다른 요소가 옆에 오지 못 함
inline
- 다른 요소가 옆에 올 수 있음
- 같은 줄에 위치할 수 있음(in the same line)
block이 inline과 다른 특징
- 너비와 높이를 가질 수 있음
- margin - 박스의 border(경계) 바깥에 있는 공간
- padding
- border
block -> inline, inline -> block으로 변경은 어떻게?
- inline -> block
- display 속성 변경(기본값은 inline)
span {
display: block;
}
- block -> inline
div {
display: inline;
}
'HTML & CSS' 카테고리의 다른 글
[Sass] Sass 설치, 컴파일 명령어 (0) | 2024.05.20 |
---|---|
Flexbox -> justify-content, align-items, order (0) | 2024.05.06 |
Flexbox -> flex-direction, flex-wrap, flex-flow (0) | 2024.05.06 |
웹 접근성(Web Accessibility)과 WAI-ARIA (0) | 2024.04.30 |
margin/padding/border (0) | 2024.02.01 |