CSS의 음수 여백: margin-top:-5가 margin-bottom:5와 같지 않은 이유는 무엇입니까?

음수 여백 탐구: 행동, 직관 및 차이점

CSS는 음수 여백을 허용하지만 그 효과는 혼란스러울 수 있습니다. 이 주제를 이해하기 위해 해당 동작을 살펴보고 margin-top:-5가 margin-bottom:5와 동일하지 않은 이유를 이해해 보겠습니다.

음수 여백 이해

음수 여백은 테두리 외부에 적용되며 시각적 여백에서는 보이지 않습니다. 이는 콘텐츠와 패딩 상자를 그대로 유지하면서 여백 상자에 영향을 미치기 때문입니다. 절대 위치에 있는 요소의 경우 음수 여백은 레이아웃에 영향을 주지 않고 지정된 양만큼 요소를 이동합니다.

그래픽 표현

음수 상단 여백이 있는 요소를 상상해 보세요.

[상단 여백이 음수인 직사각형 이미지]

여백 상자는 음수만큼 줄어들지만 콘텐츠와 패딩 상자는 영향을 받지 않습니다.

직관 뒤에 음수 여백

음수 여백은 여백 상자의 크기를 줄이기 때문에 요소를 "범프"합니다. 여백 상단 < 0이면 요소가 위쪽으로 이동합니다.

상단 여백과 하단 여백의 차이

margin-top:-8px는 margin-bottom:8px와 동일하지 않습니다. 마진이 무너지기 때문입니다. 요소의 반대편에 음수 및 양수 여백이 모두 있는 경우 여백이 축소되어 음수 여백이 제거됩니다. 결과적으로 순 이동은 발생하지 않습니다.

수직 센터링을 위한 보너스 팁

옆 여백(예: 위쪽 또는 아래쪽)에 %를 사용하면 값이 계산됩니다. 포함 블록 너비의 백분율로 표시됩니다. 이로 인해 수직 센터링 문제가 발생할 수 있습니다. 수직 센터링에는 margin-top:-50vh를 사용하는 것이 더 좋습니다. 여기서 vh는 뷰포트 높이의 단위를 나타냅니다.

위 내용은 CSS의 음수 여백: margin-top:-5가 margin-bottom:5와 같지 않은 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!