css inline and block layout

inline and block layout

일반 흐름(Normal flow)에서 배치되는 모든 상자는 인라인 또는 블록 요소이다.

인라인 요소는 인라인 서식 컨텍스트에

블록 요소는 블록 서식 컨텍스트에 포함된다.

일반흐름에서 인라인 요소와 블록 요소가 배치될 때 어떻게 동작하는가

 

block formatting context

블록 형식 지정 컨텍스트 안에서의 상자들은 맨 위부터 시작해 수직으로 순서대로 배치되며수직 상에서 상자간의  거리는 margin top, margin bottom에 영향을 받게 된다.영어와 같은 가로 쓰기 모드에서는 수직 축이며, 한자와 같은 세로 쓰기 모드에서는 수평 축이다.

 

inline formatting context

인라인 형식 지정 컨텍스트 안에서의 상자들은 맨 위부터 시작해 수평으로 순서대로 배치되며

수평 상에서 상자를 넣을 공간이 없으면 새줄로 이동한다.

수평 상에서 상자간의 거리는 padding, margin,border의 영향을 받는다.

영어와 같은 가로 쓰기 모드에서는 수평 축이며, 한자와 같은 세로 쓰기 모드에서는 수직 축이다.