CSS의 음수 여백: 요소를 멀리가 아니라 위로 밀어내는 이유는 무엇입니까?

CSS의 음수 여백: 수수께끼 풀기

CSS의 세로 위치 지정에는 음수 여백을 사용하는 경우가 많으며, 이는 모양과 모양에 대한 의문을 제기합니다. 기능. 음수 여백은 어떻게 작동하며 양수 여백과 다르게 동작하는 이유는 무엇입니까?

음수 여백 이해

음수 여백은 여백 상자의 크기를 줄입니다. 콘텐츠 및 패딩 상자. 예를 들어, 음수 margin-top은 요소를 위로 밀어 올려 요소 위의 공간을 줄입니다. 그러나 콘텐츠나 패딩 상자에는 영향을 미치지 않습니다.

시각적 표현

양수 여백과 달리 음수 여백은 요소 테두리의 일부로 표시되지 않습니다. 대신, 주변 공간을 줄여 요소를 효과적으로 "충격"시킵니다. 마진 상단이 음수인 블록을 상상해 보세요. 요소 내의 콘텐츠와 패딩은 변경되지 않지만 요소의 위쪽 가장자리와 주변 영역 사이의 공간은 줄어듭니다.

Margin-Top과 Margin-Bottom

Margin-top:-8px 및 margin-bottom:8px는 동일하지 않습니다. Margin-top은 요소를 8px 위로 밀어내고, margin-bottom은 요소를 8px 아래로 밀어냅니다. 이 차이는 여백의 "붕괴"로 인해 발생합니다. 동일한 유형의 인접한 여백(예: 위쪽 및 아래쪽 여백)은 축소됩니다. 즉, 더 큰 여백 값이 우선적으로 적용되어 작은 값을 효과적으로 대체한다는 의미입니다. 따라서 margin-top:-8px와 margin-bottom:8px는 서로를 부정하므로 수직 이동이 발생하지 않습니다.

음수 여백 이면의 직관

음수 여백을 사용하면 콘텐츠나 패딩에 영향을 주지 않고 요소를 정확하게 배치합니다. 예를 들어 CSS를 사용하여 요소를 세로로 가운데에 배치할 때 margin-top:-50%를 설정하면 요소의 너비를 기준으로 가운데에 배치됩니다. 그러나 CSS 여백 계산의 이러한 특이한 점으로 인해 margin-top:-8px를 사용하여 높이를 기준으로 요소를 수직으로 중앙에 배치해야 합니다.

위 내용은 CSS의 음수 여백: 요소를 멀리가 아니라 위로 밀어내는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!