CSS Box 모델링

CSS Box Modeling 을 통해 컨텐츠의  구분을 할 수 있다.

예를 들어 [□ | □] 와같은 형식의 내용을 표현 하고 싶다면
□은 컨텐츠이며 width와 height는 이 부분의 크기를 나타낸다,
[ 와 □ 사이는 padding,
| 는 border ,
그리고 [] 바깥 부분을 margin이라고 한다. 

++ Outline 속성

Out line 은 Border 바깥 부분, margin 안쪽에 위치한다.

outline은 Margin과 Border 사이에 있으며,이와 같이 다양한 모양을 가지고 있다.

참고
w3School : CSS Box Model, CSS Outline Properties