12. margin, padding _ 여백 주는 요소

margin과 padding 둘다 여백을 주는 요소입니다.
구조도 똑같지만 출력 방법이 큰 차이가 있습니다.

가장 큰 차이는 여백이 border의 안쪽에 존재하느냐 바깥쪽에 존재하느냐 입니다.
일단 공통적인 표기 방법을 봅시다. 하나의 세가지 방법이 있습니다.
첫번째는 여백이 같은 치수 일때, 하나로 요약해서 사용합니다.
두번째는 아래위 여백이 같고 좌우 여백이 같을때 사용합니다.
세번째 네번째는 각각 여백이 제멋대로 일때 사용하는데요,
세번째는 한번에 써줄때 사용하며 순서는 위 / 오른쪽 / 아래 / 왼쪽 순으로 써줍니다.
네번째는 그냥 하나하나 margin-top, margin-right.... 이래 적어주심 됩니다.

<div class="box show1"></div>
<div class="box show2"></div>
<div class="box show3"></div>
<div class="box show4"></div>
 

CSS

<style>
   div.box {width:50px; height:50px; border:1px solid blue;}
   div.show1 {margin:5px;}
   div.show2 {margin:5px 10px;}
   div.show3 {margin:5px 8px 2px 10px;}
   div.show4 {margin-top:5px;margin-right:8px;margin-bottom:2px;margin-left:10px;}
</style>
 

margin

margin은 다른 태그와 나랑 사이에 여백을 주는 것입니다. 바깥에 여백을 주는 겁니다.
사람으로 치면 margin은 '옆으로 나란히' 해서 옆에 애랑 사이를 띄워주는 거에요.
내가 팔을 벌려서 옆사람이랑 간격을 벌렸으니 내 몸뚱이가 커지는게 아니에요.
그래서 margin은 나 자신의 크기 변화없이 border의 바깥으로 여백이 생겨 위치만 변경됩니다.

<div class="box_normal">기준 박스</div>
<div class="box_margin">마진 준 박스</div>
 

CSS

<style>
  div.box_normal {width:100px; height:50px;background:pink;border:1px solid #ccc;}
  div.box_margin {width:100px; height:50px;background:skyblue;margin:10px;border:1px solid #ccc;}
</style>
 

기준 박스

마진 준 박스

padding

padding은 margin과 달리 나 자신에게 여백을 줍니다.
살이 쪄서 뚠뚠해졌기에 다른애들이랑 전보다 여백이 생기는 거지요.
그래서 padding은 보더 안쪽으로 여백이 생깁니다. 크기가 커지는 거죠.

<div class="box_normal">기준 박스</div>
<div class="box_padding">패딩 준 박스</div>
 

CSS

<style>
  div.box_normal2 {width:100px; height:50px;background:pink;border:1px solid #ccc;}
  div.box_padding {width:100px; height:50px;background:skyblue;padding:10px;border:1px solid #ccc;}
</style>
 

기준 박스

패딩 준 박스

* 개인적인 공부를 정리하는 블로그입니다.