간격(여백) 조정을 위한 padding, margin 적용 시 left vs right, top vs bottom

[ChanghyeonYoon]

퍼블릴싱 작업을 하다 보면
요소간의 간격을 조정하기 위해 padding이나 margin을 적용하게 되는데요.
이때, 요소간의 간격이 동일하다면 flex나 gap을 이용해서 처리 가능하지만
동일 하지 않은 경우 각각 요소에 따로 padding이나 margin을 적용하게 됩니다.

예를들어 위 같은 경우
1과 2사이의 간격을 조정하기 위해

• 1에 margin bottom을 적용한다
• 2에 margin top을 적용하다
  2가지 선택이 있습니다.

심지어 혼자 작업하더라도 되돌아보면 어쩔땐 bottom, 어쨀땐 top을 적용하게되는데
팀에 프론트엔드가 많아지면 더더욱 간격을 조정하는 방법이 달라지게 될듯 하여
뭔가 통일성이 없는 것 같다는 생각이 들었습니다.

여러분들은 저런 요소간의 간격(여백) 조정을 어떻게 하고 계실까요?

[joseph0926]

컨벤션을 정해서 한쪽으로 통일되는게 가장 중요할거같습니다 (top 또는 bottom)
다만 이럴경우 가장 끝 요소에 대한 예외 처리도 생각해봐야할거같구요,, (마지막 요소에 mb를 주었는데 요구사항은 밑 공간은 없어야 하는 경우)

아니면 아예 컨테이너를 최대한 쪼개서 gap으로 통일시키는것도 방법이 될수있을거같습니다

[kaehehehe]

한쪽으로 통일된 마크업 습관을 가지는 것이 정말 중요하다고 생각해요. 여러 명이 함께 개발할 때는 컨벤션을 꼭 정해두는 게 좋습니다. 그렇지 않으면 디자인 변경이 있을 때마다 마크업 때문에 어려움을 겪을 수 있을 거예요. 😢

[ChanghyeonYoon]

그렇다면 다들 회사에서 이와같은 스타일 컨벤션도 정해져있으신가요?!

[bakhacode]

개별 요소에 margin으로 간격을 주면, 개발자 도구에서 간격을 확인할 때 마진이 적용된 요소 위에 커서를 올려야만 표시되어 불편하더라고요. 그래서 두 개의 요소라도 한 번 감싸서 gap으로 처리하면, 어느 쪽에 margin을 줄지 고민할 필요도 없고, 이후 디자인 QA 과정에서도 더 편리하다고 느꼈어요. 이 정도의 DOM 중첩이 성능에 영향을 미칠지는 잘 모르겠지만, 크게 문제 되진 않을 것 같기도 해요

[kaehehehe]

저희 팀은 별도의 컨벤션은 없지만, 모두 암묵적으로 bottom과 right을 사용하고 있어요. 그래서 굳이 따로 컨벤션을 정할 필요는 없을 것 같아요. @bakhacode 님께서 말씀하신 것처럼 gap을 쓰는 것도 좋은 방법인 것 같아요! 👍🏼

[gonasooc]

별도의 컨벤션은 없지만 암묵적으로 bottom과 right를 기준으로 하고 있어요. 컨벤션이 무조건 필요하다는 주의는 아니지만 컴포넌트 수가 늘어나거나 동료의 컴포넌트를 수정하는 경우 가끔 헷갈릴 때가 있긴 하더라고요. 마진 병합 현상(Margin Collapsing) 때문에 padding 주로 쓰긴 했는데 어차피 본인만의 컨벤션이 있어서 bottom이나 right에만 준다면 병합 현상은 크게 신경 쓸 필요 없을 거 같긴 해요.