block-level elements and inline elements

block-level elements

-body, main, header, ul, ol, li, p 등등..

-element들이 수직으로 나열된다.

-부모 element의 너비를 차지한다.

 

inline elements

-padding과 margin은 수평으로 작용한다.

-줄바꿈 기능이 단어 앞뒤로 존재하지 않는다.

-css에선 'display: inline'으로 사용 가능하다.

 

inline-block boxes

-외관상 inline style 같지만 내부적으론 bock-level과 같다.

-줄바꿈이 없다.

-컨텐츠의 공간만큼만 차지한다.(이상 inline과 흡사)

-마진이나 패딩이 block-level과 같이 적용된다.