여백 접기를 완전히 비활성화하는 방법이 있나요? 내가 찾은 유일한 해결책("uncollapsing"이라고 함)은 1픽셀 테두리나 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효과가 있는 것 같습니다.
후자의 경우에만 패딩이나 테두리를 사용하면 접히는 것을 방지할 수 있습니다. 또한 기본값(visible）的overflow属性应用于父元素都会防止折叠。因此，overflow: auto和overflow: hidden将产生相同的效果。也许使用hidden)과 다른 항목을 사용할 때의 유일한 차이점은 상위 요소의 높이가 고정되면 콘텐츠가 예기치 않게 숨겨진다는 것입니다
.
상위 요소에 적용될 때 이 동작을 수정하는 데 도움이 될 수 있는 다른 속성은 다음과 같습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
내가 아는 한 시각적 영향이 없는 여백 축소를 비활성화하는 깔끔한 방법은 상위 요소의 패딩을
로 설정하는 것입니다. 으아아아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효과가 있는 것 같습니다.마진 축소에는 두 가지 주요 유형이 있습니다.
후자의 경우에만 패딩이나 테두리를 사용하면 접히는 것을 방지할 수 있습니다. 또한 기본값(
.visible）的overflow属性应用于父元素都会防止折叠。因此，overflow: auto和overflow: hidden将产生相同的效果。也许使用hidden)과 다른 항목을 사용할 때의 유일한 차이점은 상위 요소의 높이가 고정되면 콘텐츠가 예기치 않게 숨겨진다는 것입니다상위 요소에 적용될 때 이 동작을 수정하는 데 도움이 될 수 있는 다른 속성은 다음과 같습니다.
float: left / rightposition: absolutedisplay: flex / grid여기에서 테스트할 수 있습니다:http://jsfiddle.net/XB9wX/1/.
늘 그렇듯 Internet Explorer는 예외라는 점을 덧붙이고 싶습니다. 특히 IE 7에서는 상위 요소에 특정 레이아웃(예:
width)을 지정하면 여백이 축소되지 않습니다.출처: 사이트포인트 기사여백 축소