찾다

 >  Q&A  >  본문

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

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

모든 응답(2)나는 대답할 것이다

  • P粉521013123

    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 효과가 있는 것 같습니다.

    회신하다
    0
  • P粉588660399

    P粉5886603992023-08-22 16:36:44

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

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

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

    .

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

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

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

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

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

    회신하다
    0
  • 취소회신하다