[css] 여백 축소를 비활성화하는 방법은 무엇입니까?

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

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

안쪽 여백 또는 테두리를 사용하면 후자의 경우에만 축소되지 않습니다. 또한 부모에 적용된 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;
}

.parentClass {
    padding: 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>

.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>