마진 붕괴를 비활성화하는 방법은 무엇입니까?

마진 붕괴를 비활성화하는 방법은 무엇입니까?

마진 붕괴를 완전히 비활성화할 수 있는 방법이 있습니까?제가 찾은 유일한 해결책은 ("붕괴 해제"라는 이름으로) 1px 테두리 또는 1px 패딩을 사용하는 것입니다.저는 이것이 용납될 수 없다고 생각합니다. 외부 픽셀은 정당한 이유 없이 계산을 복잡하게 만듭니다.이 마진 붕괴를 비활성화할 수 있는 더 합리적인 방법이 있습니까?

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

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

패딩이나 테두리를 사용하면 후자의 경우에만 접히는 것을 방지할 수 있습니다. 또한, 모값의 의 값overflowvisible부모에 적용하면 축소를 방지할 수 있습니다. 서라다, 둘따 둘 다overflow: auto그리고.overflow: hidden동일한 효과가 있을 것입니다.아마도 사용할 때의 유일한 차이점일 것입니다.hidden부모의 높이가 고정된 경우 콘텐츠를 숨기는 의도하지 않은 결과입니다.

부모에 적용되면 이 동작을 수정하는 데 도움이 될 수 있는 다른 속성은 다음과 같습니다.

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

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

평소와 마찬가지로 Internet Explorer는 예외입니다.더 7에서는 요소에 . 를 들어, IE 7은 부모 요소에 레이아웃을 지정합니다.width.

출처:사이트포인트 기사 접기 여백

을 미치지 마진 한 가지 을 각적인영미않치는위마비한기로 설정하는 입니다.0.05px:

.parentClass {
    padding: 0.05px;
}

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

패딩이하다면, "에만 패딩을 적용하세요. 를 들어, 다 패 필 방 딩 이 요 에 축 원 여 " 향 지 않 만 적 용 " 합 니 다 " 을 딩 " 른 패 가 " 는 하 " 소 우 경 " 백 한 들 어 예 를 " " ▁is 니 ▁padding ▁only 합 ▁if 다 용 ▁collaps 적 ▁padding ▁to direction ▁for ▁example ▁in ▁then ing 에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.10.05Chris Morgan이 아래의 논평에서 언급했듯이, 그리고 이 작은 테스트로부터, Firefox는 실제로 다음을 차지하는 것 같습니다.0.1px고려한 것그래도,0.05px속임수를 쓰는 것 같습니다.

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

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

업데이트된 fiddle 참조: http://jsfiddle.net/XB9wX/97/

실제로 완벽하게 작동하는 솔루션이 있습니다.

디스플레이: 플렉스; 플렉스 방향: 컬럼;

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>

overflow:hidden마진이 무너지는 것을 방지하지만 부작용이 없는 것은 아닙니다. 즉...오버플로를 숨깁니다.

이것과 당신이 언급한 것과는 별개로, 당신은 단지 그것과 함께 살아가면서 그것들이 실제로 유용할 때(매 3년에서 5년) 그날을 위해 배우기만 하면 됩니다.

이 게시물이 매우 오래된 게시물이라는 것을 알고 있지만 상위 요소에 flexbox를 사용하면 하위 요소에 대한 마진 축소가 비활성화될 수 있습니다.

CSS*	고치다
디스플레이: flow-root;	✅ 모소붕괴 ❌ 형제 원소 붕괴
디스플레이: 플렉스; 플렉스 방향: 열;	✅ 모소붕괴 ✅ 형제 원소 붕괴

*현대 브라우저(IE11 제외)는 및 를 지원합니다.

예

section {
  background: green;
  outline: 2px solid purple;
}

p {
  background: yellow;
  margin: 1em 0;
}

section.flow-root {
  display: flow-root;
}

section.flex {
  display: flex;
  flex-direction: column;
}

<h2>Default</h2>  
<section>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</section>

<h2><code>flow-root</code> (Fixes only container)</h2>
<section class="flow-root">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</section>

<h2><code>flex</code> (Fixes both container & siblings)</h2>
<section class="flex">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</section>

모든웹기브반속성지합니다원야해을킷는라저우▁the▁properties▁support▁should▁every다합을 지원해야 합니다.-webkit-margin-collapse위쪽 또는 아래쪽 여백에만 설정하는 하위 속성도 있습니다.값을 접기(기본값), 삭제(인접한 여백이 있는 경우 여백을 0으로 설정) 및 분리(마진 접기 방지)로 지정할 수 있습니다.

저는 이것이 2014년 버전의 Chrome과 Safari에서 작동하는지 테스트했습니다.안타깝게도, 저는 이것이 웹킷 기반이 아니기 때문에 IE에서 지원되지 않을 것이라고 생각합니다.

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

Mozilla의 CSS 웹킷 확장 페이지를 확인하면 이러한 속성을 독점으로 나열하고 사용하지 않는 것이 좋습니다.이것은 그들이 곧 표준 CSS로 들어가지 않을 가능성이 높고 오직 웹킷 기반 브라우저만이 그들을 지원할 것이기 때문입니다.

형제자매하려면, 형자매간축방면추려가지하를소여를 합니다.display: inline-block;(둘 다 추가할 수 있지만 하나로 충분합니다.)

해라

{
 display:flex;
 flex-direction:column;
}

또는

{
   display:grid;
}

.position상대적으로 설정합니다.다음은 마진 축소를 비활성화하는 데 사용할 수 있는 명령 목록입니다.

여기 테스트할 놀이터가 있습니다.

아무 것이나 .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입니다.

참고로 그리드를 사용할 수 있지만 부작용이 있습니다 :)

.parent {
  display: grid
}

언급URL : https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing