padding, margin 차이점 이해하기

우리는 웹페이지를 만들 때 가상의 박스를 만들어서 작업을한다. 때문에 헷갈릴 수가 있다. 콘텐츠(안의 내용)을 기준으로 Border(가상의 상자의 선)까지의 여백을 Padding이라고 하고 다른 상자와의 거리를 Margin이라고 한다.

 

---

이 사진을 보면 첫번 째 박스(Box1) 이 두번 째 박스(Box2)보다 왼쪽으로 치우쳐보인다. 왜일까? margin을 설정해 주었기 때문이다. magin은 음수를 사용하면 콘텐츠의 외부 여백을 주는 역할이 아닌 끌어당기는 역할을 할 수 있다. 

 

 

.box1{

padding : 20px;

width : 252px;

height : 52px;

line-height: 52px;

border: 4px solid black;

margin-left : -100px;

}

 

이렇게 쓸 수가 있다.

 

하지만 양수로 쓰면 역할이 바뀐다.

 

마진값을 50px로 주었을 때

마진값을 20px로 주었을 때

상자 두개 (box1, box2의 경계 (box1과 box2의 입장에서 보았을 때는 외부여백이죠?))가 50px일 때 더 벌어진 것을 볼 수가 있다.