전치

CSS에서 여백을 잡는 방법에 대해 후배에게 "margin-top과 margin-bottom 어느 쪽 파입니까?"라고 물었으므로,
답변 내용을 기사로 남깁니다.

옛날, 회사의 OJT에서 배운 것의 공유가 됩니다.

원칙

1. 기본적으로 margin-top 사용

이유는 그쪽이 나중에 조절하기 쉽기 때문입니다.
또, 후술의 우선도로 설정해 가면, margin-bottom의 차례는 거의 없어집니다.

2. 아무래도 무리한 경우에 bottom을 사용한다

margin-bottom은 다른 방법으로는 아무래도 설정이 무리인 경우만 사용합시다.

3. 인접 셀렉터를 잘 사용하면 투르트메하기 쉽다

특정 요소끼리 나란히 있을 때만 마진을 취한다 = 여백의 상쇄 설정이 불필요하게 됩니다.

설정 우선순위

요소가 아무리 중첩되어도 아래의 우선 순위는 변경되지 않습니다.
이 우선도로 여백을 설정해 가면, margin-bottom의 차례는 거의 없어집니다.

부모 요소의 padding으로 주위(상하 좌우)의 여백을 취한다.

1의 설정에서는 불가능한, 아이 요소간의 여백을 margin-top으로 취한다.

인접 셀렉터 사용

주로 <li> 이나 <section> 의 반복으로 열거하는 경우에 사용합니다.
투르투메를 고려하는 경우에 차례가 많아집니다.

나쁜

특정 클래스에 일률적으로 margin-top을 설정한 후에 무시하고 있다

.item {
  margin-top: 10px
}

.item:first-child {
  margin-top: 0;
}

좋은

같은 요소간의 여백을 취하고 싶은 경우는 인접 셀렉터를 사용하는 것이 적절.

.item + .item {
  margin-top: 10px;
}

※동일한 요소가 아닌 경우에도 사용할 수 있습니다.

.section + .special-section {
  margin-top: 30px;
}

개략도

Chrome의 dev 툴상에서는 아래와 같은 여백의 방법이 됩니다.
(dev 도구의 색 구성표와 같은 색으로 표시)

#bdc87f : padding

#f8c696 : margin

비고

옆에 늘어놓을 경우의 좌우의 여백에 대해서도 같게, 원칙으로서 margin-left(왼쪽 여백)를 사용합니다.

요소간의 여백은 인접 셀렉터 + margin-left 로 설정합니다.

이상의 생각은 border 설정에도 응용할 수 있습니다.

부모 요소의 border로 주위의 테두리를 그린다

요소 사이의 가로선/세로선은 border-top/border-left로 설정합니다