마진 vs 패딩

출처 : http://v2.eyoom.net/bbs/?t=1xX

이윰넷-상상 그이상을 꿈꾸며

Margin : 가까이 오지 마(ma)!~

Padding : 넌 내 마음을 후벼 파(pa)잖아!~ 

 

margin은 나를 중심으로 밀어 내는 성향

padding는 내 안쪽으로 향하는 성향

 

1) 숫자가 4개일 때 =>  margin: 10px 20px 30px 40px

해석) 나를 중심으로 시계 방향으로 바깥쪽 여백을 할당합니다.

1번위치 (top) : 위쪽 여백을 10px 만큼 자리를 확보 하세요.

2번위치 (right) : 오른쪽 여백을 20px 만큼 자리를 확보하세요.

3번위치 (bottom) : 아래쪽 여백을 30px 만큼 자리를 확보하세요.

4번위치 (left) : 왼쪽 여백을 40px 만큼 자리를 확보하세요.

 

2) 숫자가 3개 일 때 => margin : 10px 20px 30px

해석) 나를 중심으로 시계 방향으로 바깥쪽 여백을 할당합니다.

1번위치 (top) : 위쪽 여백을 10px 만큼 자리를 확보 하세요.

2번위치 (right) : 오른쪽 여백을 20px 만큼 자리를 확보하세요.

3번위치 (bottom) : 아래쪽 여백을 30px 만큼 자리를 확보하세요.

4번위치 (left) : ?? 숫자가 없는데요? 그럼 반대쪽인 2번위치 (right)에 할당된 20px 만큼 자리를 확보하면 됩니다.

 

3) 숫자가 1개와 auto가 있을 때 => margin : 10px auto

해석) 나를 중심으로 시계 방향으로 바깥쪽 여백을 할당합니다.

1번위치 (top) : 위쪽 여백을 10px 만큼 자리를 확보 하세요.

2번위치 (right) : auto 인데요? 그렇습니다. 자동으로 오른쪽 여백을 잡아 줍니다.

3번위치 (bottom) : 반대편 위치인 1번위치(top) 숫자인 10px 만큼 확보하면 됩니다.

4번위치 (left) : 그렇습니다. 반대쪽 2번위치의 auto가 됩니다. 그럼 자동으로 왼쪽 여백을 잡아 줍니다.

결국 위/아래는 10px 이며, 좌/우는 auto 이고 좌/우 여백이 동일할 수밖에 없는 방법은 내가 가운데로 가면 됩니다.

그래서 위와 같은 설정은

나를 가운데 정렬 (center)하시요.

와 동일한 의미를 같게 되는 겁니다.

 

 

 

 

 

 

 

출처 :  https://coding-factory.tistory.com/187

[Html] Margin, Padding 속성의 차이점과 사용법

질문 2