margin, padding 차이점

 

margin과 padding의 비교

	+  (양수)	-   (음수)	auto	단위
margin	o	o	o	px, % ...
padding	o	x	x	px, % ...

 

• margin auto 기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가집니다. 이를 활용하여 수평 중앙 정렬을 할 수 있습니다. 

 

 

- margin은 object화면과 여백 (외부여백)을 의미한다

 

- padding은 object화면과 (내부여백)을 의미한다 (내용과 border 사이의 여백)

 

 

margin 속성

       기본 값 : 0

 

< 속성 값 >

length	고정값으로 지정합니다. (ex. px, em ....)
percent	요소의 width에 상대적인 크기를 지정합니다.
auto	브라우저에 의해 계산된 값이 적용 됩니다.

 

• margin-top border 영역의 위쪽 여백을 지정합니다.
  
  
• margin-right border 영역의 오른쪽 여백을 지정합니다.
  
  
• margin-bottom border 영역의 아래쪽 여백을 지정합니다.
  
  
• margin-left border 영역의 왼쪽 여백을 지정합니다.

좌우의 margin이 모두 auto로 적용 되었다면, 브라우저는 요소가 가질수 있는 가로 영역에서 자신의 width를 제외한 나머지 여백에 크기에 대해 균등 분할 하여 적용합니다. 이에 따라 요소는 수평 중앙 정렬이 됩니다

 

margin: [-top] [-right] [-bottom] [-left];

                0 10px 20px 30px /* 상, 우, 하, 좌 다름*/

                0 10px 20px /* 좌, 우 같음 */

                0 10px /* 상, 하 같음 & 좌, 우 같음 */

                0 /* 상, 우, 하, 좌 모두 같음 */

margin: 0 auto;

 

 

위는 대표적인 중앙정렬 속성이다. 그런데 어떻게 동작되길래 중앙정렬이 되는 것일까?

 

1. '0'

여기서 0값은 위 아래 여백을 주지 않는다는 의미이다. 즉, margin: __;에서 __값은 좌우위아래 여백을 뜻하고, 여기에 '0'이 놓여졌으므로 좌우 위 아래 여백을 지정하지 않는다는 뜻!

 

 

margin:0;

그래서 margin이 표시되지 않는다

 

 

 

margin:100;

100같은 숫자는 단위가 없어서 적용되지 않음! %나 px을 정확히 정해줘야 한다.

 

 

 

margin:100px;

margin이 100px만큼 적용된 모습.

 

 

 

 

2. 'auto'

auto는 가로 중앙에 배치한다는 뜻이다. 그리고 자연스럽게 좌우 여백은 균등하게 배분된다.

 

 

 

margin:100px auto;

여기에서 100px은 위 아래 여백이 되고 좌우 여백은 균등하게 분배되 element가 정중앙에 배치된다.

 

 

 

margin:0 auto;

 

 

 

그렇게 해서 margin:0 auto;는 위아래 여백 없이 가로 중앙에 배치되는 가장 기본적인 서식이라는 점!!

 

 

 

3. Exception

 

margin:0 auto가 중앙정렬이 되지 않는 경우가 있다. 몇 가지 문제들이 걸리면 이럴 수 있는데

 

1) DocType 선언 문제

<!DocType~~> 앞에는 어떤 문자도 선행되어서는 안되며 선언 또한 정확해야 한다.

2)width

폭의 연산이 불가능하면 가운데 정렬을 할 수 없다. 해결책은 overflow:hidden!

3)inline속성의 태그(ex.span)

display:block을 해주면 된다!