CSS의 음수 여백: 실제로 어떻게 작동하나요?

CSS의 음수 여백: 심층 분석

음수 여백은 CSS에서 유효하지만 종종 혼란과 오해를 불러일으킵니다. 이 기사에서는 음수 여백의 복잡성을 자세히 살펴보고 그 메커니즘을 탐구하고 margin-top: -5px와 margin-bottom: 5px의 구별과 같은 일반적인 질문을 해결합니다.

CSS 사양에 따르면 음수 여백은 크기를 줄입니다. 내용과 안쪽 여백 상자는 영향을 받지 않은 채 유지하면서 여백 상자의 내용을 변경합니다. 제공된 예제와 같이 절대 위치에 있는 요소에 적용하면 이는 시각적으로 명백해집니다. 여백 상자의 공간 손실에도 불구하고 여백 상자의 이동으로 인해 요소 자체가 위쪽으로 이동합니다.

여백 상자를 바깥쪽으로 확장하는 양수 여백과 달리 음수 여백은 "범프 업"됩니다. 여백 상자를 시각적으로 축소하여 요소를 생성합니다. 이러한 축소는 요소가 위로 밀려나는 듯한 착각을 불러일으킵니다.

margin-top:-5px와 margin-bottom:5px의 구별

margin-top의 차이점 :-5px 및 margin-bottom:5px는 상대 위치에 있습니다. margin-top:-5px는 여백 상자를 위로 밀어 요소를 효과적으로 5px 아래로 이동시킵니다. 반면 margin-bottom:5px는 요소 아래 여백 상자의 크기를 늘려서 아래쪽으로 5px 이동하게 합니다.

세로 중앙 정렬의 경우 위쪽과 아래쪽을 모두 설정하는 것이 중요합니다. 적절한 정렬을 얻으려면 여백을 -8px가 아닌 -50%로 설정하세요. 이는 백분율로 표시된 여백이 포함 블록의 높이가 아닌 너비를 기준으로 계산되기 때문입니다.

위 내용은 CSS의 음수 여백: 실제로 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!