display 속성으로 서로 바꿀 수 있다.
block:
- 블록 요소는 높이(height)와 너비(width)가 있다.
- 하나의 요소 옆에 다른 요소가 올 수 없다.
- block이 아닌 종류를 기억하는 것이 편하다.
- 브라우저는 기본적으로 block에 3개의 요소를 준다.
- margin : box의 경계(border)의 바깥에 있는 공간,
- padding: box의 경계의 안쪽에 있는 공간,
- border
inline
- (in the same line)인라인 요소는 높이(height)와 너비(width)를 가질 수 없다
- < span> <img> <a> 등등
- 하나의 요소 옆에 다른 요소가 올 수 있다
- 높이를 가질 수 없기 때문에 좌, 우만 margin을 가질 수 있고 위, 아래에는 margin을 가질 수 없다.
- padding은 모든 방향에 적용할 수 있다.
collapsing margins : 두 박스의 경계가 같다면 두 박스의 margin 은 하나로 취급이 된다. 위 아래에서만 적용이 된다.
inline-block : inline 을 block으로 인식시켜준다. 모든 방향의 margin 과 padding을 넣을수 있고, 옆에 둘 수도 있다.