여백 접기를 비활성화하는 방법

Question

여백 접기를 완전히 비활성화하는 방법이 있나요? 내가 찾은 유일한 해결책("uncollapsing"이라고 함)은 1픽셀 테두리나 1픽셀 패딩을 사용하는 것입니다. 저는 이것이 용납될 수 없다고 생각합니다. 추가 픽셀로 인해 계산이 불필요하게 복잡해지기 때문입니다. 이 여백 축소를 비활성화하는 더 합리적인 방법이 있습니까?

Answer 1

내가 아는 한 시각적 영향이 없는 여백 축소를 비활성화하는 깔끔한 방법은 상위 요소의 패딩을 0.05px:

로 설정하는 것입니다. 으아아아

패딩은 더 이상 0이 아니므로 붕괴가 발생하지 않지만, 동시에 패딩은 시각적으로 0으로 반올림될 만큼 작습니다.

추가 패딩이 필요한 경우 padding-top: 0.05px;와 같이 여백 붕괴가 발생하지 않기를 원하는 "방향"으로만 패딩을 적용하세요.

작업 예시:

으아아아 으아아아

EDIT: 값을 0.1에서 0.05로 변경했습니다. Chris Morgan이 아래 댓글에서 언급했듯이 이 작은 테스트를 통해 다음을 알 수 있습니다. Firefox는 0.1px의 패딩을 고려합니다. 하지만 0.1更改为0.05。正如克里斯·摩根在下面的评论中提到的，并且从这个小测试中可以看出，似乎Firefox确实考虑了0.1px的内边距。不过，0.05px 효과가 있는 것 같습니다.

Answer 2

마진 축소에는 두 가지 주요 유형이 있습니다.

• 인접 요소 사이의 여백 축소
• 상위 요소와 하위 요소 사이의 여백 축소

후자의 경우에만 패딩이나 테두리를 사용하면 접히는 것을 방지할 수 있습니다. 또한 기본값(visible）的overflow属性应用于父元素都会防止折叠。因此，overflow: auto和overflow: hidden将产生相同的效果。也许使用hidden)과 다른 항목을 사용할 때의 유일한 차이점은 상위 요소의 높이가 고정되면 콘텐츠가 예기치 않게 숨겨진다는 것입니다

.

상위 요소에 적용될 때 이 동작을 수정하는 데 도움이 될 수 있는 다른 속성은 다음과 같습니다.

• float: left / right
• position: absolute
• display: flex / grid

여기에서 테스트할 수 있습니다: http://jsfiddle.net/XB9wX/1/.

늘 그렇듯 Internet Explorer는 예외라는 점을 덧붙이고 싶습니다. 특히 IE 7에서는 상위 요소에 특정 레이아웃(예: width)을 지정하면 여백이 축소되지 않습니다.

출처: 사이트포인트 기사 여백 축소