CSS의 한계 충돌 이해하기

내가 처음으로 CSS를 쓰기 시작했을 때, 나는 그것을 대략적으로 처리하고 이해했다. 그 중 하나는 바로 CSS의 간격과 접는 방식이었다.
많은 경우, 그것 때문에, 나는 원하지 않는 결과를 얻었기 때문에, 여기서, 나는 그것의 몇 가지 기본 규칙을 풀려고 노력한다. 그러면, 너는 이전처럼 곤경에 빠지지 않을 것이다. 나는 너를 너무 귀찮게 하지 않기를 바란다.

경계, 내용, 충전과 테두리는 상자 모형의 핵심 개념을 구성한다.그러나 보증금의 능력은 예상치 못했던, 아마도 사람을 낙담하게 할 수 있는 결과로 이미 매우 나쁜 빛에 놓여 있다. - 이렇게 엉망이다. 맥스토이버는 보증금을 어떻게 그의 블로그 글에 해칠 수 있는지를 썼다-Margin considered harmful.하하

그렇다면 이윤율은 도대체 무엇일까?

대부분의 개발자에게 Margin은 빠르고 편리한 CSS 속성으로 블록이나 내연 블록 요소를 가운데에 쉽게 놓을 수 있지만 실제로 Margin이 해야 할 일은 요소 주위에 공간을 추가하는 것이다!
Margin이 이 공간을 늘리려고 할 때, 양수와 음의 값을 받아들일 수 있습니다.음수 값을 사용하면 한 요소를 부모 요소 밖으로 끌어낼 수 있고, 양수 값을 사용하면 한 요소를 더 아래로 밀어낼 수 있습니다.
간단해 보이지만, 무고한 특징일지도 모르지만, 가장자리와 관련된 괴벽과 놀라운 점 때문이다.

보증금 붕괴

보증금 사용은 예상치 못한 결과를 가져올 수 있으므로 주의해야 할 것은 보증금 붕괴다.이윤율이 붕괴되는 시간과 방식을 이해하면 낭비되는 시간을 절약하고 두통을 피하거나 줄일 수 있다.
다음은 보증금의 붕괴를 이해하는 데 도움을 줄 수 있는 규칙들입니다.

보증금 붕괴 규칙:

규칙 1: 수직 여백만 내려갑니다.

이는 <div>와<section> 같은 블록급 원소가 같은 경계로 서로 중첩되면 두 경계가 무너지고 한 경계만 나타난다는 것을 의미한다.
다음 예제에서는 이러한 설명에 대해 자세히 살펴보겠습니다.

   div {
       background: rebeccapurple;
       color: #ffffff;
       height: 100px;
       margin-bottom: 30px;
       margin-top: 30px;
       width: 100px;
   }

<div>This is a div</div>
<div>This is another div</div>

너는 결과가 무엇일지 알아맞힐 수 있니?
첫 번째와 두 번째 60px 의 밑부분과 윗부분 30px + 30px 사이의 간격을 원할 수도 있지만, 흥미로운 것은 이렇게 일하는 것이 아니라는 것이다.
앞에서 말한 바와 같이 이 두 이윤율의 가치가 같기 때문에 그들이 한 것은 단지 붕괴될 뿐이다div!

위에서 캡처한 바와 같이 이 두 페이지의 간격은 확실히 붕괴되었다.
다음은 코드pen live 프레젠테이션의 링크입니다. 실제 응용을 보고 싶으면.
Codepen Live Example
만약 이것30px을 나란히 배치, 즉 수평으로 배치하면 첫 번째div의 오른쪽과 두 번째div의 왼쪽 사이에 같은 여분이 있다면 어떻게 될까요?

   div {
       background: rebeccapurple;
       color: #ffffff;
       display: inline-block;
       height: 100px;
       margin-right: 50px;
       margin-left: 50px;
       width: 100px;
   }

<div>This won't collapse</div>
<div>This won't collapse either</div>

HorIzontal Margin Demo

여기서 무슨 일이 있었죠?
블록 요소는 인라인 블록 요소로 변환되며 모두 동일한 여백을 가집니다.우리가 본 수직 블록 원소의 접기와 반대로 이것div은 접지 않고 위의 그림에서 보듯이 우리는 두 개div가 한 개div의 간격으로 분리된다. 즉, 100px는 첫 번째 블록 원소의 오른쪽과 50px가 두 번째 원소의 왼쪽에서 분리된다.
이런 상황이 발생한 이유는 우리의 첫 번째 규칙에 따르면 수직 가장자리만 내려앉고 수평 가장자리는 내려앉지 않기 때문이다.

규칙 2: 최대 이윤 승리:

우리의 첫 번째 규칙과 반대로, 같은 경계는 하나의 경계로 축소된다.
여기서 수직 원소가 서로 다른 간격으로 서로 중첩될 때 더 큰 간격은 항상 승리한다.
두 이윤율 간의 차이가 얼마나 작든지 간에 비교적 작은 이윤율은 항상 비교적 큰 이윤율에 의해 포위될 것이다.

<div>The smaller margin gets lost</div>
<div>The bigger margin wins</div>

div {
  background: peru;
  color: #ffffff;
  height: 100px;
  margin-bottom: 30px;
  margin-top: 50px;
  width: 100px;
}

Bigger margin wins Demo
너는 아마도 첫 번째 구역의 밑바닥과 두 번째 구역의 윗부분 사이의 이윤을 합치면 50px일 것이다. 그러나'최대 이윤 이익자'규칙에 따라 우리는 서로 다른 결과를 얻었다. 비교적 큰 이윤80px이 포위되었다50px.
따라서 우리는 둘 사이에30px의 여분만 있다.

규칙 3: 인접한 요소만 무너짐

옥스포드 사전에 따르면 인접한 뜻은 다음과 같다.

"next to or adjoining something else".

이는 인접한 요소만 붕괴할 수 있기 때문에 보증금 붕괴와 관련이 있다.
실제로 줄 바꿈 문자50px나 다른 상자 모델 피쳐(채우기 또는 테두리)는 요소 경계 사이에 어떤 형태로든 무너지지 않도록 벽으로 볼 수 있습니다.
다음 예는 다음과 같습니다.

<div>The margin won't collapse</div>
<br>
<div>The margin won't collapse either</div>

div {
  background: peru;
  color: #ffffff;
  height: 100px;
  margin-bottom: 30px;
  margin-top: 30px;
  width: 100px;
}

우리의 첫 번째 규칙인 수직 간격 접기 규칙을 참고하십시오. 이 두 요소 사이의 간격이 접힐 것이라고 생각하지만, 이 두 요소 사이에는 '벽', 즉 줄 바꾸기 divs 가 있기 때문에 발생하지 않을 것입니다.

Adjacent Margin Demo
이 줄 바꿈 태그 (<br> 를 삭제하면 수직 간격 접기 규칙의 예시와 같은 결과를 얻을 수 있습니다.
이것은 결코 상세한 명세서가 아니다. 이윤 감소 괴벽이 나타나지 않도록 하는 모든 규칙을 열거한 것이다. 이것은 단지 당신이 직면할 수 있는 일들을 깊이 이해하고 다른 일에 어떻게 대처해야 하는지를 이해하기 위한 것이다.
건배, 즐거움 코드.