Block, Inline, Inline-block 특징 간단 정리

block
1. 한줄을 무조건 차지하는 길막하는 성질
2. width, height, padding, border, margin 다 적용 가능
3. 따로 width를 선언하지 않은 경우 width = 부모의 content - box의 100% / 따로 width를 선언한 경우 남은 공간은 margin으로 채움.
4. 따로 부모의 height를 선언하지 않을 경우 자식 요소의 height의 합 = 부모의 height

inline (흐름)
1. block(면 - 영역) vs inline(선 - 흐름)
2. 텍스트처럼 영역이 모자라면 자동으로 줄바꿈
3. width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom 사용불가 = padding, border, margin 좌,우는 적용가능

inline-block
1. block처럼 영역을 잡을수 있으면서도 inline처럼 흐름 안에 있다.
2. width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom 사용가능