Box Model

 

2D 게임 캐릭터라고 생각해보자.

 

padding은 피부가 뼈대보다 안쪽으로 들어갈 수 없는 것과 같은 원리로 음수 값 가질 수 없다.

 

margin은 게임 캐릭터가 겹쳐서 설 수 있는 것과 같은 원리로 음수 값 가질 수 있다.

 

Note

 

width : content의 너비. %를 사용하면 부모의 width(= 부모의 content의 너비)에 대한 percentage로 계산된다.

 

height : content의 높이. %를 사용하면 부모의 explicit height에 대한 percentage로 계산된다. 부모의 height가 명확히 지정되지 않았다면 이상한 값으로 계산된다. 적어도 하나의 조상이 height 값이 px 등 구체적으로 지정되거나 html의 height가 100% 여야 한다.

 

 

Margin Collapse

 

빈블록 : 내용, padding, border 등 시각적인 요소가 없는 블록

 

빈블록인 부모가 자식을 갖게 되면 부모는 자식의 border까지만 포함하게 된다. 즉, 부모 block의 content 영역은 자식의 border까지가 된다. 이 때 margin collapse가 일어난다. 

 

빈블록이 아닌 부모가 자식을 갖게 되면 부모는 자식의 margin까지 포함하게 된다. 즉, 부모 block의 content 영역은 자식의 margin을 포함하게 된다.

 

빈블록의 margin-top과 margin-bottom 사이에는 margin collaspe가 일어난다.