마진을 어떻게 뽑아 듭니까? [복제하다

StackOverflow https://stackoverflow.com/questions/1828804

  •  11-09-2019
  •  | 
  •  

문제

이 질문은 이미 여기에 답이 있습니다.

CSS의 붕괴 마진 : http://www.w3.org/tr/css21/box.html#collapsing-margins

나는 이해한다 기능의 목적, 그러나 나는 레이아웃을하려고 노력하고 있으며 그것을 끄는 방법을 알 수 없습니다.

CSS 자습서에서 일반적으로 설명되는 방법은 다음 중 하나입니다.

  1. 테두리를 추가하십시오
  2. 패딩을 추가하십시오

이 모든 것은 배경 이미지와 고정 패딩이있는 픽셀-완벽한 레이아웃을 다룰 때 명백한 부작용이 있습니다.

여분의 픽셀을 레이아웃에 넣지 않고 단순히 붕괴를 비활성화하는 방법이 있습니까? 이와 같이 행동을 바꾸기 위해 문서에 시각적으로 영향을 미치는 것은 의미가 없습니다.

도움이 되었습니까?

해결책

붕괴를 "파손"하려면 사이에 무언가가 필요합니다.

나의 첫 번째 생각은 div를 사용하는 것이었다 display:none 그 사이에 설정되었지만 작동하지 않는 것 같습니다.

그래서 나는 시도했다 :

<div style="overflow: hidden; height: 0px; width: 0px;">.</div>

작업을 멋지게하는 것 같습니다 (적어도 Firefox에서는 테스트를 위해 인터넷 익스플로러가 여기에 설치되어 있지 않습니다 ...)

<html>
    <body>
        <div style="margin: 100px;">.</div>
        <div style="overflow: hidden; height: 0px; width: 0px;">.</div>
        <div style="margin: 100px;">.</div>
    </body>
</html>

다른 팁

IE8에서 할 수 있습니다.

<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

CSS와 함께 :

.uncollapse-margins:before,
.uncollapse-margins:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

플렉스 또는 그리드 레이아웃을 사용하십시오.

플렉스 및 그리드 컨테이너에는 마진 붕괴와 같은 것이 없습니다.

사양에 대한 자세한 내용 :

3. 플렉스 컨테이너 : the flex 그리고 inline-flex display가치

Flex 컨테이너는 내용에 대한 새로운 Flex 형식 컨텍스트를 설정합니다. 이는 블록 형식의 레이아웃 대신에 플렉스 레이아웃이 사용된다는 점을 제외하고는 블록 서식 컨텍스트를 설정하는 것과 동일합니다. 예를 들어, 플로트는 플렉스 컨테이너에 침입하지 않으며 플렉스 컨테이너의 여백은 내용의 여백과 함께 무너지지 않습니다.

5.1. 그리드 컨테이너 설정 : the grid 그리고 inline-grid표시 값

그리드 컨테이너는 내용에 대한 새로운 그리드 서식 컨텍스트를 설정합니다. 블록 레이아웃 대신 그리드 레이아웃이 사용된다는 점을 제외하고는 블록 서식 컨텍스트를 설정하는 것과 동일합니다. 플로트는 그리드 컨테이너에 침입하지 않으며 그리드 컨테이너의 여백은 내용의 여백과 붕괴되지 않습니다.

Eric Meyer는 그의 기사에서 당신의 정확한 요점을 말합니다. unclapsing margins.

그의 접근 방식은 그림 6 이후 기사의 텍스트를 참조하십시오. 그는 1px 패딩/테두리가 일반적으로 갈 길이라고 언급하지만, 추가 픽셀을 추가 할 때 유연성이없는 경우에 매우 간단한 솔루션을 제공합니다.

그래도 각 요소의 마진을 수동으로 무시하는 것이 포함되므로 특정 사례에 효과가 있는지 확실하지 않습니다.

내가 아는 한 시각적 영향이없는 마진 붕괴를 비활성화하는 깔끔한 트릭 중 하나는 부모의 패딩을 0.05px:

.parentClass {
    padding: 0.05px;
}

패딩은 더 이상 0이 아니기 때문에 더 이상 붕괴가 발생하지 않지만 동시에 패딩이 작기 때문에 시각적으로 0으로 떨어집니다.

다른 패딩이 원하는 경우, 예를 들어 마진 붕괴가 필요하지 않은 "방향"에만 패딩을 적용하십시오. padding-top: 0.05px;.

Working example: 

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}
<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

편집하다: 값을 변경했습니다 0.1 에게 0.05. 에서 이 작은 테스트, Firefox가 취하는 것 같습니다 0.1px 패딩을 고려합니다. 그렇지만, 0.05px 트릭을하는 것 같습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top