박스모델 - 아웃라인(outline) 속성

 

아웃라인은 테두리 다음에 위치하며 마진의 안쪽의 선을 말한다. 이 때 마진의 값에 포함되며 따로 넓이를 차지하지 않는다.

 

<div>블럭 영역</div>

 

 

 

 

<div style="outline:10px solid red;">아웃라인의 위치</div>

 

 

 

 

 

 

 

위의 아웃라인 속성이 적용된 결과를 보면 마진(margin)영역에서 위아래의 영역은 중복되는 것을 확인할 수 있다. 이는 위/아래의 마진의 영역이 중첩되는 부분은 하나의 영역으로 합쳐짐을 의미한다. 또한, 마진의 영역을 벗어나게 아웃라인의 영역이 클 경우 마진을 넘기고 다른 영역까지 덮어버린다.  

 

아웃라인 속성은 style, color, width 값을 가질 수 있다.

 

 [참고] http://www.w3schools.com/css/css_outline.asp