margin, padding 적용에 대한 작은 생각들

margin 적용 시점

• 다른 Element 와 간격을 줄때

padding 적용 시점

• padding : 부모와 자식 Element 의 간격을 줄때

margin 을 적용하다보면 아래와 같은 물음이 생긴다

• Element A 와 Element B 가 형제인 경우
• Element A 와 Element B 의 간격이 10px 라 했을 때 어느 Element 에 margin 을 적용해야 하는지?

답변

1. 순서상 뒤에 오는 것에 적용해야 한다고 생각한다
2. Element B 를 제거 시 Element A 는 수정하지 않게 적용을 해야 한다
3. Element A 옆에 Element B 가 추가 되어 생긴 공백이니 Element B 에 적용되어야 디자이너의 의도를 반영한 코드라 생각한다

예시 아래 코드에서 item 사이의 간격이 10px 인 경우

<list>
  <item></item>
  <item></item>
  <item></item>
</list>

list item:not(:first-child) {
  margin-top: 10px
}

로 표현 할 수 있다