CSS에서 음수 여백은 어떻게 작동합니까: 시각적 설명?

CSS의 음수 여백 시각화 및 이해

CSS의 음수 여백은 요소 위치 지정에 고유한 효과를 제공하지만 때로는 동작을 파악하기 어려울 수 있습니다.

시각적 모양:

음수 여백은 요소의 위치를 ​​시각적으로 조정하지만 눈에 보이는 간격으로 나타나지는 않습니다. 본질적으로 요소를 반대 방향으로 "밀어서" 해당 방향에 여백이 없는 것처럼 보입니다.

margin-top과 margin-bottom의 차이점:

margin-top:-8px 및 margin-bottom:8px는 요소 여백 상자의 서로 다른 측면에 영향을 미치기 때문에 동일하지 않습니다. margin-top의 음수 여백은 요소를 위쪽으로 밀어내고, margin-bottom의 양수 여백은 요소를 아래로 밀어냅니다.

음수 여백 작동 방식:

CSS 상자 모델은 설명합니다. 여백 작동 방식:

• 테두리 상자: 패딩과 테두리를 포함한 요소의 경계.
• 여백 상자: 테두리 너머로 확장됩니다. 요소의 위치와 간격에 영향을 미치는 지정된 여백이 있는 상자.

margin-top:-8px와 같이 음수 여백이 적용되면 여백 상자의 크기가 해당 방향으로 줄어들어 요소의 위치. 귀하의 예에서는 포함 블록 내에서 요소를 8px 위로 푸시합니다.

자세한 설명:

지정된 높이 16px에 따라 콘텐츠 상자의 높이가 결정됩니다. . 음수 상단 여백은 여백 상자를 8px 위로 밀어 요소가 페이지 중간에 표시되도록 합니다. 이 방법은 절대 요소를 세로로 가운데 맞추는 데 사용됩니다.

보너스 참고:

여백을 사용하여 세로로 가운데 맞추는 경우 margin-top:-50% 대신 margin-top:-50%를 설정하는 것이 중요합니다. 여백 상단:-8px. 이는 백분율 단위의 여백이 높이가 아닌 포함 블록의 너비를 기준으로 계산되기 때문입니다. margin-top:-50%는 수평 및 수직 치수 모두에서 올바른 중심 정렬을 보장합니다.

위 내용은 CSS에서 음수 여백은 어떻게 작동합니까: 시각적 설명?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!