부정적인 마진이 어떤 경우에는 적용되지 않는 이유는 무엇입니까? 이 문제를 해결하는 방법?

CSS 음수 마진 실패의 원인 및 솔루션

웹 페이지 레이아웃에서 음수 마진은 종종 요소 중첩과 같은 특수 효과를 달성하는 데 사용됩니다. 그러나 때때로 실패 하고이 기사는 원인을 분석하고 솔루션을 제공합니다.

사례 연구

메인 컨테이너 (메인)와 두 개의 자식 요소 (파란색 div 및 분홍색 div)가 포함 된 레이아웃을 가정하십시오. 메인 컨테이너의 너비는 100%이고, 파란색 div는 200px이며, margin-right: -200px 사용하여 파란색 div와 핑크 디브와 겹칩니다.

메인 컨테이너의 폭이 100%인 경우 오버랩 효과가 나타나지 않습니다. 그러나 메인 컨테이너의 너비가 70%로 감소하면 음수 마진이 적용되고 두 개의 DIV가 겹칩니다.

원인과 솔루션

문제는 파란색 div의 실제 너비입니다. 테두리 또는 패딩의 설정으로 인해 파란색 DIV의 실제 너비는 200px를 초과합니다. 예를 들어, 테두리가 1px 인 경우 실제 너비는 202px (200px 2px)입니다.

margin-right: -200px 실제 폭이 200px를 초과하는 실제 폭을 완전히 상쇄 할 수 없으므로 겹치는 효과 실패가 발생합니다.

해결책 : 음수 마진을 정확하게 계산하고 설정하십시오. 파란색 div의 실제 너비 (경계 및 내부 마진 포함)를 측정하고 margin-right 값을 실제 너비의 음수 값으로 설정하십시오. 예를 들어, 실제 너비가 202px 인 경우 margin-right: -202px 설정해야합니다.

정확한 계산을 통해 음수 마진이 요소의 실제 폭을 완전히 상쇄하여 예상 레이아웃 효과를 달성 할 수 있습니다. 또한 브라우저 개발자 도구를 사용하여 요소의 실제 크기를 확인하여 음수 마진 값의 정확도를 확인하는 것이 좋습니다.

위 내용은 부정적인 마진이 어떤 경우에는 적용되지 않는 이유는 무엇입니까? 이 문제를 해결하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!