CSS_box model

위의 그림은 CSS Box 입니다.

박스를 이루는 요소로는

>      Margin

>      Border

>    Padding

>    Content

네가지로 구성되있습니다.

---

Margin

쉽게 BOX 밖

상/우/하/좌 여백으로 생각하면됩니다.

( top , right , bottom , left )

Border

box를 감싸는 테두리입니다.

Padding

쉽게 BOX 안

상/우/하/좌 여백으로 생각하면됩니다.

( top , right , bottom , left )

Content

box안에 들어가는 내용입니다.

---

위와 같이 div 에 css를 적용시킨 모습입니다

width 너비입니다

Box모델의 가로 너비는

[ width + border-left + padding-left + border-right + padding-right ]

가됩니다.

위의 사진대로 

[ 600px + 5px + 10px + 5px + 10px = 630px ]

총 630px가 됩니다!!

---

읽어주셔서 감사합니다!