마진 축소를 비활성화하는 방법이 있습니까? 내가 찾은 유일한 해결책 ( "unollapsing"이라는 이름으로)은 1px 테두리 또는 1px 패딩을 사용합니다. 나는 이것을 용납 할 수 없다는 것을 알았습니다. 외부 픽셀은 아무 이유없이 계산을 복잡하게 만듭니다. 이 마진 축소를 비활성화하는보다 합리적인 방법이 있습니까?

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

• 인접한 요소 사이의 축소 여백
• 부모 요소와 자식 요소 사이의 축소 여백

안쪽 여백 또는 테두리를 사용하면 후자의 경우에만 축소되지 않습니다. 또한 부모에 적용된 overflow기본값 ( visible) 과 다른 값은 축소를 방지합니다. 따라서, 모두 overflow: auto와 overflow: hidden동일한 효과를 얻을 수 있습니다. hidden부모가 고정 된 높이를 가진 경우 내용을 숨기면 의도하지 않은 결과가 사용될 때 유일한 차이점 일 수 있습니다.

일단 부모에게 적용되면이 문제를 해결하는 데 도움이되는 다른 속성은 다음과 같습니다.

• float: left / right
• position: absolute
• display: inline-block / flex

http://jsfiddle.net/XB9wX/1/ 에서 모든 것을 테스트 할 수 있습니다 .

평소처럼 Internet Explorer는 예외입니다. 보다 구체적으로, IE 7에서와 같이 부모 요소에 대해 어떤 종류의 레이아웃이 지정되면 여백이 축소되지 않습니다 width.

출처 : Sitepoint의 기사 무너지는 여백

이를 위해 좋은 오래된 마이크로 클리어 픽스를 사용할 수도 있습니다.

#container:before, #container:after{
    content: ' ';
    display: table;
}

업데이트 된 바이올린 참조 : http://jsfiddle.net/XB9wX/97/

내가 아는 한 시각적 영향을 미치지 않는 마진 축소를 비활성화하는 한 가지 간결한 트릭은 부모의 패딩을 다음과 같이 설정하는 것입니다 0.05px.

.parentClass {
    padding: 0.05px;
}

패딩이 더 이상 0이 아니므로 더 이상 축소가 발생하지 않지만 동시에 패딩이 작아서 시각적으로 0으로 반올림됩니다.

다른 패딩이 필요한 경우 예를 들어 여백 축소가 필요하지 않은 "방향"에만 패딩을 적용하십시오 padding-top: 0.05px;.

작업 예 :

.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. Chris Morgan 이 아래 주석에서 언급 했듯이이 작은 테스트 에서 Firefox는 실제로 0.1px패딩을 고려 하는 것으로 보입니다 . 그러나 0.05px트릭을 수행하는 것 같습니다.

overflow:hidden 접히는 여백을 방지하지만 부작용이 없습니다. 즉 오버플로를 숨 깁니다.

이것과 당신이 언급 한 것을 제외하고는 실제로 그것을 배우고 그들이 실제로 유용 할 때 (3 ~ 5 년마다) 오늘 배워야합니다.

실제로, 완벽하게 작동하는 것이 있습니다.

디스플레이 : 플렉스; 플렉스 방향 : 열;

IE10 이상 만 지원하면서 살 수있는 한

.container {
  display: flex;
  flex-direction: column;
    background: #ddd;
    width: 15em;
}

.square {
    margin: 15px;
    height: 3em;
    background: yellow;
}

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

모든 웹킷 기반 브라우저는 속성을 지원해야합니다 -webkit-margin-collapse . 상단 또는 하단 여백에 대해서만 설정하는 하위 속성도 있습니다. 값 축소 (기본값), 버리기 (인접 여백이있는 경우 여백을 0으로 설정) 및 분리 (여백 축소 방지)를 제공 할 수 있습니다.

이것이 2014 버전의 Chrome 및 Safari에서 작동하는지 테스트했습니다. 불행히도, 이것이 웹킷을 기반으로하지 않기 때문에 IE에서 지원되지 않을 것이라고 생각합니다.

자세한 설명은 Apple의 Safari CSS Reference 를 참조하십시오 .

Mozilla의 CSS 웹킷 확장 프로그램 페이지 를 확인하면 이러한 특성이 독점 특성으로 나열되며 사용하지 않는 것이 좋습니다. 빠른 시일 내에 표준 CSS에 들어 가지 않을 가능성이 높기 때문에 웹킷 기반 브라우저 만 지원할 수 있기 때문입니다.

나는 이것이 매우 오래된 게시물이라는 것을 알고 있지만 부모 요소에 flexbox를 사용하면 자식 요소에 대한 마진 축소가 비활성화된다고 말하고 싶었습니다.

부모가 있기 때문에 마진 붕괴와 비슷한 문제가있었습니다. position relative로 설정 . 여백 축소를 비활성화하는 데 사용할 수있는 명령 목록은 다음과 같습니다.

테스트 할 곳이 있습니다

그냥 어떤 할당하려고 parent-fix*하는 클래스 div.container요소 또는 모든 클래스 children-fix*에를 div.margin. 귀하의 필요에 가장 적합한 것을 선택하십시오.

언제

• 마진 붕괴는 이다 장애인 , div.absolute빨간색 배경이 페이지의 맨 위에 배치됩니다 함께.
• 마진은 접히는 div.absolute 것과 같은 Y 좌표에 위치합니다div.margin

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin 
   collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin 
   collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

<div class="container parent-fix1">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

여기 당신이 편집 할 수있는 예제 가있는 jsFiddle 이 있습니다.

최신 브라우저 (IE11 제외)에서는 부모-자식 여백 붕괴를 방지하는 간단한 솔루션을 사용하는 것 display: flow-root입니다. 그러나 인접한 요소 붕괴를 방지하려면 다른 기술이 필요합니다.

데모 (이전)

.parent {
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

데모 (후)

.parent {
  display: flow-root;
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

귀하의 정보를 위해 그리드를 사용할 수 있지만 부작용이 있습니다 :)

.parent {
  display: grid
}