div 외부 여백 겹침 문제 및 해결 방법

이 기사에서는 div 여백 겹침과 관련된 문제를 해결하는 방법을 주로 소개하는 css에 대한 관련 지식을 제공합니다. 여백 겹침은 일반 유동 문서의 위쪽 여백과 아래쪽 여백 사이에서만 발생합니다. 블록 요소만 겹침 여백을 갖습니다. , 인라인 요소와 인라인 블록 요소는 마진이 겹치지 않지만 모두에게 도움이 되기를 바랍니다.

(학습 영상 공유: css 영상 튜토리얼, html 영상 튜토리얼)

CSS 여백 겹침(여백 축소)

블록 여백의 위쪽 여백(margin-top)과 아래쪽 여백 -bottom은 때때로 단일 여백의 최대 크기(또는 동일한 경우 그 중 하나만)인 단일 여백으로 병합(축소)됩니다. 이러한 동작을 여백 축소라고 합니다.

테두리 겹침은 두 개 이상의 상자(인접하거나 중첩될 수 있음)의 인접한 테두리(비어 있지 않은 콘텐츠, 패딩 또는 둘 사이의 테두리 없음)가 겹쳐서 단일 테두리를 형성한다는 의미입니다.

즉, 마진 겹침은 수직으로 인접한 두 개의 블록 수준 요소를 의미하며, 위쪽 및 아래쪽 마진이 만나면 바깥쪽 마진이 겹치고, 겹치는 마진은 그 중 더 큰 것과 같습니다.

마진 값 중복 계산 방법:

• 마진 값은 모두 양수이므로 둘 중 최대값을 취합니다.

• 음수 경계가 나타나면 가장 큰 양수 경계에서 절대값이 가장 큰 음수 경계를 뺍니다.

• 양수 경계가 없으면 절대값이 가장 큰 음수 경계를 0에서 뺍니다.

1. 여백 겹침 문제가 발생하는 요소는 무엇입니까?

여백 겹침은 일반 흐름 문서의 위쪽 여백과 아래쪽 여백 사이에서만 발생합니다. 블록 요소에만 인라인 요소가 겹칩니다. 및 인라인 블록 요소에는 여백 겹침 문제가 없습니다

두 번째, 어떤 상황에서 여백 겹침이 발생합니까?

첫 번째 상황: 인접 형제 요소의 Marin - 의 값 하단 및 여백-상단 겹침

테두리가 겹칠 경우 최대 테두리 범위만 선택되어 남게 되므로 둘 사이의 여백은 100px입니다
이 테두리 겹침 문제를 해결하려면 해야 합니다. 나중에 요소에 부동 소수점을 추가하거나 형제 중 하나에 div를 넣고 테두리를 설정합니다: 1px 단색 흰색;

<div id="box1"></div>
<div id="box2"></div>
 
#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-bottom: 50px;
     margin-top: 50px;
 }
 #box2{
     width: 200px;
     height: 200px;
     background: lightcoral;
     margin-top:100px ;
     opacity: 0.3;
     float: left;   //加上float后，两者间距为150px
 }

두 번째 경우: 상위 요소와 첫 번째/마지막 하위 요소의 여백을 병합합니다

<div id="box1">
   <div id="box3"></div>
</div>
#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-top: 50px;
 }
 #box3 {
   width: 100px;
   height: 100px;
   background-color: #f12416;
   margin-top: 50px;
 }

The 예제의 효과는 다음과 같습니다.

부모 요소와 자식 요소 모두의 margin-top이 50px로 설정된 경우 부모 요소와 자식 요소는 모두 테두리에서 50px 떨어져 있습니다. 우리가 생각하는 대로 자식 요소와 부모 요소 사이의 거리는 50px입니다.

상위 요소가 상단 여백을 설정하지 않고 하위 요소가 margin-top을 50px로 설정한 경우, 이때 상위 및 하위 요소는 여전히 상단에서 50px 떨어져 있습니다.

해결책:

방법 1: 추가 오버플로: 상위 요소에 숨겨짐

이 방법은 여백 겹침 문제를 해결하지만 이 방법은 "자식 요소의 높이에 여백 높이를 더한 값이 상위 요소의 높이보다 작습니다(childHeight +margin). -top, 그렇지 않으면 하위 요소 부분 콘텐츠가 숨겨집니다

방법 2: 상위 요소에 테두리 추가(투명 테두리를 추가할 수 있음)

방법 3: 디스플레이 설정:인라인 -block;

블록 요소만 여백이 겹치므로 블록 요소가 아닌 것으로 만들고 인라인 블록 요소로 설정합니다

방법 4: float를 부모 또는 자식으로 설정

방법 5 : float를 상위 또는 하위로 설정 하위 설정 위치: 절대;

방법 6: 상위 요소에 패딩 추가

#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-top: 50px;
     /*overflow:hidden;*/
     /*border: 1px solid #00000000;*/
     /*display: inline-block;*/
     /*float:left;*/
     /*position: absolute*/
     /*padding: 10px;*/
 }
 #box3 {
        width: 100px;
        height: 100px;
        background-color: #f12416;
        margin-top: 50px;
        /*display: inline-block;*/
        /*float:left;*/
        /*position: absolute*/
    }

세 번째 경우: 빈 블록 수준 요소

자체 여백 -top과 margin-bottom이 겹쳐서 발생합니다. 테두리, Pa
dding 또는 높이를 설정하여 이 문제를 해결할 수 있습니다.

  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <style>
 #box1{
      width: 200px; height:200px;
      background:lightseagreen;
      margin-bottom:50px ;
    } 
    #box2{
      margin-top: 20px;
      margin-bottom:20px ;
      border: 1px solid salmon; //加了border或padding后，与上下两个元素的间距分别为50px和100px,没加之前，上下两个元素的间距为100px
      /*padding: 1px; */
    }
    #box3{
      width: 200px; height:200px;
      background:darkgoldenrod;
      margin-top:100px ;
    }

테두리나 패딩을 추가한 후 위쪽 요소와 아래쪽 요소 사이의 거리는 각각 50px이고 추가하기 전에는 위쪽 요소와 아래쪽 요소 사이의 거리가 100px이었습니다.

네 번째 경우: 상위 요소의 높이 auto의 margin-bottom은 하위 요소의 margin-bottom과 겹칩니다.

상위 요소는 border-bottom과 padding-bottom을 분리하도록 설정하거나

일 수 있습니다.

상위 요소의 높이를 설정하면 max-height 및 min-height도 이 문제를 해결할 수 있습니다.

3. 여백 겹침을 계산하는 방법

• 모두 양수 값인 경우 가장 큰 값을 선택하세요.

• 모두 양수가 아니면 절대값을 취하고 양수값에서 최대값을 뺍니다.

• 양수가 없으면 절대값을 취하고 0에서 최대값을 뺍니다.

(학습 영상 공유: css 영상 튜토리얼, html 영상 튜토리얼)

위 내용은 div 외부 여백 겹침 문제 및 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!