CSS에 마진 붕괴 규칙이 어떤 이유로 도입 되었습니까?

StackOverflow https://stackoverflow.com/questions/1438114

  •  08-07-2019
  •  | 
  •  

문제

이 영리한 규칙 세트가 도움이 될 수있는 상황을 알 수 없습니다. 그들은 상자 모델의 단순성을 깨고 다른 레이아웃 조각을 결합 할 때 무한한 문제의 원인을 제공합니다. 그래서 이유는 무엇입니까?

규칙 참조를 위해.

업데이트 : 규칙은 형제 요소에 대해 매우 논리적이지만, 왜 여백이 트리까지 부모 요소로 전파되어야합니까? 어떤 종류의 문제가 해결됩니까?

예를 들어:

<div style="margin: 20px; background-color: red;">
    <div style="margin: 20px;">
        <p style="margin: 100px;">red</p>
    </div>
</div>
<div style="margin: 20px; background-color: blue;">blue</div>

최상위 DIV는 서로 100px로 간격을두고 있습니다.

도움이 되었습니까?

해결책

이것은 대안이 덜 의미가 있다는 것을 깨닫기 전까지는 실제로 의미가없는 상황 중 하나입니다.

아시다시피, 마진은 요소 사이의 거리를 지정하며 각 요소를 둘러싼 "외부 패딩"이 아닙니다. 마진 20px가있는 두 개의 요소가 서로 옆에 있으면, 그 사이의 거리는 40px가 아닌 20px입니다.

여백은 다른 요소와의 거리이기 때문에, 거리가 요소에서 주변 요소까지, 부모 요소의 경계가 아니라는 것이 합리적입니다.

마진이 부모 요소의 경계에 계산되면 요소를 div 요소는 요소 사이에 추가 간격을 소개합니다. div 그 자체에는 마진이나 패딩이 없습니다. 끊임없는 것을 추가하면 요소 주변의 여백이 동일하게 유지되어야합니다. div 주변.

다른 팁

언제 도움이 될 수 있습니까?

가장 간단한 예 : 단락 및 제목 목록, 각각 margin-top 그리고 margin-bottom. 기사의 상단과 하단과 다른 요소 사이에 여백을 원합니다.

마진이 붕괴되면 첫 번째 또는 마지막 항목 (원래 CSS 사양의 일부가 아님)에 특수 마진을 설정하지 않고 컨테이너를 패딩 할 수 있습니다.

그러나 나는 전체적으로 무의미한 특징에 동의합니다.

여러 단락이 포함 된 텍스트 본문을 고려하십시오. 각 단락이 2em으로 분리되기를 원하며 첫 번째 단락이 앞의 내용과 2em으로 분리되기를 원하고 마지막 단락은 다음 내용과 2EM으로 분리되기를 원합니다.

단락을 분리하는 상단 및 하단 여백이 붕괴되기 때문에 다음 CSS로 쉽게 달성됩니다.

p {
    margin-top: 2em
    margin-bottom: 2em;
}

여백이 붕괴되지 않으면 여백이 2EM이 아닌 4EM 공간으로 분리됩니다. 마진이 붕괴되지 않으면 원하는 효과를 달성하는 유일한 방법은 첫 번째 및 마지막 단락에 대한 추가 규칙을 설정하는 것입니다. 여기에는 클래스 또는 ID를 제공하는 것이 포함됩니다 (텍스트가 변경된 경우 유지해야 함). , 또는 그렇지 않은 추가 요소로 래핑하고 사용 : 1 차 자녀와 마지막 자식, 또는 ... 글쎄, 당신은 아이디어를 얻습니다.

마진 붕괴가 발생하지 않으면 위의 규칙이 제공하는 일관된 간격을 달성하기 위해 해결 방법을 요구하는 중복 질문이 많이있을 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top