마진 붕괴 문제를 해결하는 방법

이 글은 마진 붕괴의 문제와 마진 붕괴를 해결하는 방법을 공유합니다. 이는 확실한 참고 가치가 있으며 모든 사람의 연구에 도움이 되기를 바랍니다.

Margin은 요소의 외부 여백을 설정하는 것입니다. 일반적으로 여백 값을 설정할 때 상위 요소는 브라우저를 기준으로 위치를 지정해야 하며 하위 요소는 상위 요소를 기준으로 위치를 지정해야 합니다. 그러나 응답이 없는 경우가 많습니다. 마진 값을 어떻게 설정하든 오늘은 이 문제를 해결하는 방법을 알려 드리겠습니다.

html code

<div class="box1">
   <div class="box2"></div>
</div>

css code

.box1{
	width:200px;
	height:200px;
	background-color:rgb(16,128,214);
	}
.box2{
        width:100px;
	height:100px;
        background-color:rgb(128,227,248);
}

rendering

margin-top 값 설정 시 변경 사항

box1에 margin-top:100px를 설정하면 box2도 margin-top:100px도 설정합니다. 요소는 브라우저를 기준으로 100px 아래에 있지만 상위 요소를 기준으로 하위 요소의 위치는 변경되지 않았습니다. 그러나 하위 요소에 설정된 margin-top이 상위 상자의 높이보다 150px 더 큰 경우 하위 요소는 더 이상 상위 요소를 기준으로 위치가 지정되지 않지만 상위 요소가 있는 브라우저 위치를 기준으로 150px 아래로 이동합니다.

위 내용에서 여백 축소가 무엇인지 알 수 있습니다.

margin Collapse

margin Collapse 부모는 브라우저를 기준으로 위치를 지정했지만 자식은 부모를 기준으로 위치를 지정하지 않은 경우입니다.

부모를 기준으로 자식이 축소된 것 같습니다.

부모-자식의 세로 여백입니다. 중첩된 요소에서 상위-하위 요소가 함께 결합되면 두 요소가 가장 큰

값

마진 붕괴 문제를 해결하는 방법

은 본질적으로 bfc(블록 형식)를 트리거하는 것입니다. 컨텍스트) 상자의 상위 요소 렌더링 규칙을 변경합니다방법 1

위치:절대;

상대 위치 설정

상위 요소에 상대 위치 속성을 추가하여 여백 축소 문제를 해결하세요

방법 2

display:inline -block;

행 블록 수준 요소로 설정

방법 3

float:left 및 float:right;

float를 사용하여 스타일 변경

방법 4

overflow:hidden

오버플로 상자의 숨겨진 표시 부분

요약: 위 내용은 이 글의 내용입니다. 그것이 모두에게 도움이 되기를 바랍니다.

위 내용은 마진 붕괴 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!