[css] margin과 padding

margin - 바깥여백

padding - 안쪽여백

 

시각적으로는 box를 기준으로 주황색 영역에 margin이 적용되고 푸른색영역에 padding이 적용된다.

 

 

margin과 padding의 적용방향

.box{margin: 20px;}

값을 하나만 적을경우

=상하좌우 모두 20px

 

.box{margin: 10px 20px;}

값을 두개 적을경우

=상하 10px 좌우 20px

 

.box{margin: 10px 20px 30px;}

값을 세개 적을경우

=상10px 좌우20px 하30px

 

.box{margin: 10px 20px 30px 40px;}

값을 네개 적을경우

=상10px 우20px 하30px 좌40px //상단부터 시계방향 순서대로 적용된다.

 

 

! margin과 padding을 함께 적용했을경우 padding이 우선으로 적용된다.