CSS 외부여백 margin

 

티스토리 스킨 편집하면서 지겹도록 봤던 태그다. m.a.r.g.i.n... 토 나온다. =-= 그러니 복습 삼아 정리만 하고 가자.

 

margin은 컨텐츠의 외부 여백을 설정한다.

margin은 상-우-하-좌 각각 값을 줄 수 있다. 보통 px; 단위를 사용하고 % 도 많이 사용한다.

 

margin-top / 상

margin-right / 우

margin-left / 좌

margin-bottom / 하

 

margin은 위의 상-우-좌-하로 쓰지 않고 한번에 쓴다.

margin: 0 0 0 0; / 상-우-하-좌

margin: 0 0 0; / 상-우좌-하

margin: 0 0; / 상하-우좌

margin: 0; / 상우하좌

margin: auto; / 가로 중앙

margin: inherit / 상위 속성을 받는다.

 

기억하기 귀찮으니 그냥...

margin: 10px 15px 10px 25px; 이렇게 4개 다 쓰는게 편하다.

 

margin: 100px;

margin: 50px;

이렇게 두 개의 컨텐츠에 외부 여백이 있다면 두 컨텐츠 사이의 여백은 150px이 아니다.

두 여백이 겹치면 큰 여백이 작은 여백을 잡아먹는다. 이에 관한 자세한 내용은 css 태그 사전에 정리한 적이 있다.

 

2019/09/17 - [웹코딩 어려워/· 사전 상세 보기] - CSS 태그 : margin

CSS 태그 : margin

 

padding과 함께 티스토리 편집에서 정말 많이 쓰이는 태그니 잘 익혀두자.

참고로 padding은 쓰는 방법이 거의 동일하다. 단지 padding은 컨텐츠의 내부 여백이다.