P粉5210131232023-08-22 17:46:33
내가 아는 한 시각적 영향이 없는 여백 축소를 비활성화하는 깔끔한 방법은 상위 요소의 패딩을 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
효과가 있는 것 같습니다.
P粉5886603992023-08-22 16:36:44
마진 축소에는 두 가지 주요 유형이 있습니다.
후자의 경우에만 패딩이나 테두리를 사용하면 접히는 것을 방지할 수 있습니다. 또한 기본값(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
)을 지정하면 여백이 축소되지 않습니다.
출처: 사이트포인트 기사 여백 축소