요소와 요소 사이는 마진(margin)이나 gap을 써야 한다

[soyeonhn]

1. Margin 사용

• 한 요소의 바깥쪽 여백을 설정해서 다른 요소와 간격을 띄우는 방법
• 예: 버튼 아래 margin-bottom: 16px; → 다음 요소와 16px 간격 유지

2. Gap 사용

• 컨테이너(flex, grid) 안의 자식 요소들 간의 공통 간격을 주는 속성
• 예: display: flex; gap: 12px; → 모든 아이템 사이에 12px 간격 자동 적용

!! 개발 고려해서 디자인할 때 하면 안 되는 것 :

1. padding이나 position으로 억지로 간격을 만드는 것 (예시 : 텍스트와 버튼 사이 간격을 맞추려고 버튼에 padding-right 주는 것)
2. 보더/테두리 근처 여백 넣기 (예시 : 예: 카드 컴포넌트 바깥에 간격 줘야 하는데 카드 내부 padding으로 처리 → 다른 곳에서 재사용 시 문제 발생)