시각적 레이아웃에 영향을 주지 않고 CSS 여백 축소를 방지하려면 어떻게 해야 합니까?

픽셀 조정 없이 여백 축소 방지

CSS에서 여백 축소는 픽셀 완벽한 레이아웃을 시도할 때 성가신 일이 될 수 있습니다. 테두리나 패딩을 추가하는 일반적으로 권장되는 솔루션에는 바람직하지 않은 부작용이 있는 경우가 많습니다.

다행히도 시각적 모양을 변경하지 않고 여백 축소를 비활성화하는 간단한 방법이 있습니다.

보이지 않는 요소 활용 내부 div, 오버플로: 숨김, 높이: 0px, 너비: 0px:

<div>
<p>여백이 축소되는 요소 사이에 이 구분선을 삽입하면 레이아웃에 눈에 띄는 변경 사항을 적용하지 않고 효과적으로 축소를 해제할 수 있습니다.</p>
<p>예:</p>
<pre class="brush:php;toolbar:false"><div><p>이 방법을 사용하면 의도한 간격과 모양을 유지하면서 여백 축소가 비활성화됩니다. 레이아웃.</p></div>