* { 여백: 20px } 의 경우

다음 레이아웃을 가정합니다.

<ul class='posts'>
  <li class='post'>
    <h1>
      Title of the article
    </h1>
    <div class='sub-heading'>
      <ul class='tags'>
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
      <ul>
    </div>
    <div class='body'>
      Body
    </div>
  </li>
</ul>

모든 요소 사이에 일관된 간격을 추가하도록 요청한다면 first approach은 다음과 같을 것입니다.

.post,
.post h1,
.post .sub-heading,
.post .body {
  margin: 20px;
}

이제 모든 요소가 부모의 간격 요구 사항을 인식해야 하기 때문에 이는 이상적이지 않습니다.

더 좋은 방법이 있습니다.

범용 하위 선택기를 사용하여 일관된 간격 추가

새로운 프런트엔드 개발자를 온보딩할 때 가장 먼저 언급되는 것 중 하나는 다음 코드 스니펫의 변형을 사용하는 것에 관한 것입니다.

& > * {
  margin: 20px;
}

이 스니펫의 변형(보통 & > * { margin: var(--gap-size); } )은 지난 5년 동안 제가 구축한 모든 UI에 존재합니다.

저는 이 스타일을 모든 종류의 "컨테이너"요소에 배치합니다. "패널". Figma's auto-layout 과 유사하게 레이아웃 요소 사이에 일관된 간격을 적용합니다.



위 접근 방식의 장점은 개별 요소 중 어느 것도 마진 요구 사항을 알 필요가 없다는 것입니다. 위의 예에서 개별 입력, 버튼 및 행은 부모로부터 여백을 상속받습니다.

개별 요소 사이의 간격 조정

부제목이 제목에 더 가깝기를 원한다고 가정합니다.



방법CSS specificity works 때문에 각 요소는 여백 설정을 쉽게 재정의할 수 있습니다. this example .posts 및 .post의 자식은 기본 여백을 상속하지만 .sub-heading는 이 설정을 재정의합니다.

또는 에서 언급한 것처럼 단방향 마진을 사용하여 음수 마진을 사용하지 않고 same result을 달성할 수 있습니다. 그러나 이 접근 방식의 단점은 뒤따르는 요소만 이전 요소(또는 마진 방향이 반대인 경우 선두 요소)에 상대적인 마진을 제어할 수 있다는 것입니다.

어느 쪽이든, 그러한 요구 사항에 부딪히면 마크업이 의미론적으로 논리적인지 고려하는 것이 좋습니다. * { margin: 20px } 스타일의 목표는 컨테이너의 구성원 간에 일정한 간격을 두는 것입니다. 특정 요소에 다른 간격이 필요한 경우 이 요소는 다른 컨테이너의 구성원이어야 합니다. 우리의 경우 제목 및 하위 제목 요소를 헤더 그룹으로 그룹화할 것을 제안합니다.

<li class='post'>
  <div class='header'>
    <h1>
      Title of the article
    </h1>
    <div class='sub-heading'>
      <ul class='tags'>
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
      <ul>
    </div>
  </div>
  <div class='body'>
    Body
  </div>
</li>

이는 마진 요구 사항solve에서도 발생합니다.



마지막으로 주의할 점은 특별히 * { margin: 20px }를 옹호하는 것이 아닙니다. 간격이 무엇이든 관계없이 범용 자손 선택기를 사용하여 요소 사이에 일관된 간격을 적용할 것을 제안합니다. 마지막 예에서 * { margin: 0 0 10px 0; }는 해당 컨테이너의 모든 자식 간에 적용하려는 마진이기 때문입니다. 마지막 예에서 설명한 것처럼 이 규칙을 사용하면 레이아웃 구성의 실수가 강조 표시됩니다.