Margin, Padding 태그를 통한 DIv 여백 설정 알아보기

 

Div 여백을 설정하려고 보면 한번씩 헷갈릴 때가 있습니다.

그림을 통해 간단하게 Margin, Padding의 범위에 대하여 알아보도록 하겠습니다.

 

<div style="margin:10px; border:10px solid blue; padding:10px; width:80px;">Content</div>

 

 

 Div 의 총 너비는 어떻게 될까요?

 

총 너비는 = Content영역(80px) + Padding좌/우(10px + 10px) + Border좌/우(10px + 10px) + Margin좌/우(10px + 10px) 

 

width:80px 설정은 Content 너비이며 Margin, Border, Padding 를 모두 더한

요소의 총 너비는 140px 가 됩니다.

 

 

간단하게 CSS Div의 여백 설정 태그인

Margin, Padding 에 대하여 알아 보았습니다.