[css] 자식 요소의 여백은 부모 요소를 움직입니다.

DIV 내에 여백이 있는 하위 요소 에서 대안을 찾았습니다 .

.parent { overflow: auto; }

또는:

.parent { overflow: hidden; }

이렇게하면 여백이 무너지는 것을 방지 할 수 있습니다. 테두리와 패딩도 동일합니다. 따라서 다음을 사용하여 상단 여백 붕괴를 방지 할 수 있습니다.

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

인기있는 요청에 의한 업데이트 :
축소 여백의 요점은 텍스트 내용을 처리하는 것입니다. 예를 들면 다음과 같습니다.

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

브라우저가 여백을 축소하기 때문에 텍스트가 예상대로 나타나고 <div>래퍼 태그는 여백에 영향을 미치지 않습니다. 각 요소는 주위에 간격이 있지만 간격은 두 배가되지 않습니다. 다음은의 마진 <h2>및 <p>최대 추가하지 않습니다,하지만 서로에 슬라이드 (그들은 붕괴). <p>및 <ul>요소에 대해서도 마찬가지 입니다.

안타깝게도 현대적인 디자인 으로이 아이디어는 컨테이너를 명시 적으로 원할 때 물릴 수 있습니다. 이를 CSS 말하기에서 새로운 블록 형식화 컨텍스트 라고합니다 . overflow또는 마진 트릭은 당신에게 그것을 줄 것이다.

답변

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}