CSS · HTML
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
padding과 함께 티스토리 편집에서 정말 많이 쓰이는 태그니 잘 익혀두자.
참고로 padding은 쓰는 방법이 거의 동일하다. 단지 padding은 컨텐츠의 내부 여백이다.