Box

Box Type

---

display 속성에 box type 값을 넣어준다.

 

그 값에는

 

① block : 영역을 다 차지한다. 일명 길막.

 

block에

따로 width를 설정하지 않은 경우, 부모 content box의 100%를 차지

따로 width를 설정한 경우, margin으로 자동으로 채워버림

 

부모에 따로 height를 설정하지 않은 경우, 자식 요소의 height들의 합을 부모 height로 가진다.

 

width, height, padding, border, margin을 모두 사용가능

 

 

 

② Inline : 컨텐츠만큼만 크기를 가지고 옆으로 흐름

 

box model의 속성 중,

 

width, height,

padding-top, padding-bottom,

border-top, border-bottom,

margin-top, margin-bottom을 사용할 수 없다.

 

 

 

③ Inline block : Inline과 block의 장점만 모아놓음, 흐름(Inline)을 가지지만 영역(block)도 차지함