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

다른 ( child ) 를 포함 하는 div( parent )가 있습니다 . Parent는 특별한 CSS 스타일이없는 첫 번째 요소 입니다. 내가 설정할 때divbody

.child
{
    margin-top: 10px;
}

최종 결과는 내 자녀의 상단이 여전히 부모와 일치한다는 것입니다. 자식이 10px 아래로 이동하는 대신 부모님이 10px 아래로 이동합니다.

내로 DOCTYPE설정되어 XHTML Transitional있습니다.

내가 여기서 무엇을 놓치고 있습니까?

편집 1
부모는 배경을 위에서 아래로 표시해야하기 때문에 엄격하게 정의 된 치수를 가져야합니다 (픽셀 완벽). 따라서 수직 여백을 설정 하지 않아도 됩니다.

편집 2
이 동작은 FF, IE 및 CR에서 동일합니다.

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;
}

모든 답변이 문제를 해결하지만 다음과 같은 트레이드 오프 / 조정 / 약속과 함께 제공됩니다.

• floats, 당신 은 요소를 부동 해야
• border-top, 이렇게하면 부모를 1px 이상 아래로 밀고 -1px부모 요소 자체에 여백을 도입하여 조정해야 합니다. 부모가 이미 margin-top상대 단위에 있을 때 문제가 발생할 수 있습니다 .
• padding-top을 사용하는 것과 동일한 효과 border-top
• overflow: hidden, 부모가 드롭 다운 메뉴와 같이 넘친 콘텐츠를 표시해야 할 때 사용할 수 없습니다
• overflow: auto, 그림자 또는 툴팁의 삼각형과 같이 (과도하게) 넘쳐나는 콘텐츠가있는 상위 요소에 대한 스크롤바를 소개합니다

다음과 같이 CSS3 의사 요소를 사용하여이 문제를 해결할 수 있습니다.

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

https://jsfiddle.net/hLgbyax5/1/

display:inline-block자식 요소 에 스타일 추가

부모 요소는 최소한  자식 요소 앞에 두지 않아야합니다 .

이것이 나를 위해 일한 것입니다

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

.css 내부 에서 div 요소 의 표시 속성 을 인라인 차단 으로 설정하면 문제가 해결됩니다. 예상대로 마진이 작동합니다.

깔끔한 CSS 전용 솔루션

다음 코드를 사용하여 무의식적 인 첫 번째 자녀를 실수로 움직이는 div 앞에 추가하십시오.

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

이 방법의 장점은 기존 요소의 CSS를 변경할 필요가 없으므로 디자인에 최소한의 영향을 미칩니다. 이 옆에 추가되는 요소는 의사 요소이며 DOM 트리 에는 없습니다 .

의사 요소에 대한 지원은 Firefox 3 이상, Safari 3 이상, Chrome 3 이상, Opera 10 이상 및 IE 8 이상으로 널리 퍼져 있습니다. 이것은 최신 브라우저에서 작동합니다 ( ::beforeIE8에서는 지원되지 않는 최신 버전 에서는 주의하십시오 ).

문맥

요소의 첫 번째 자식에가있는 margin-top경우 부모는 중복 여백을 축소하는 방법으로 위치를 조정합니다. 왜? 그런 식입니다.

다음과 같은 문제가 발생했습니다.

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

간단한 공간과 같은 콘텐츠가있는 자식을 추가하여 문제를 해결할 수 있습니다. 그러나 우리 모두는 디자인 전용 문제에 대한 공간을 추가하는 것을 싫어합니다. 따라서이 white-space속성을 사용하여 컨텐츠를 위조하십시오.

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

어디 position: relative;수정의 정확한 위치를 보장합니다. 또한 white-space: pre;공백과 같은 컨텐츠를 수정 사항에 추가하지 않아도됩니다. 그리고 height: 0px;width: 0px;overflow: hidden;당신은 수정을 보지 못할 것입니다.

고대 IE 브라우저에서 높이를 실제로 0 으로 추가 line-height: 0px;하거나 max-height: 0px;확인 해야 할 수도 있습니다 (확실하지 않습니다). 선택적으로 <!--dummy-->작동하지 않는 경우 이전 IE 브라우저에서 추가 할 수 있습니다 .

간단히 말해 CSS만으로이 모든 작업을 수행 할 수 있습니다 (HTML DOM 트리에 실제 자식을 추가 할 필요가 없음).

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

"Div parent"를 방지하려면 "div child"의 여백을 사용하십시오
. 부모에서 다음 CSS를 사용하십시오.

• 흙손
• 심
• 경계
• 과다

margin요소가 포함 .child붕괴된다.

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

이 예에서는 브라우저 기본 스타일을 p받고 margin있습니다. 브라우저 기본값 font-size은 일반적으로 16px입니다. 를 가짐으로써 margin-top개 이상의 16px의 #child당신 그것의 위치 이동을 통지하기 시작합니다.

나는이 문제도 가지고 있었지만 부정적인 마진 해킹을 방지하기 위해 선호했다.

<div class="supercontainer"></div>

주변에 여백 대신 패딩이 있습니다. 물론 이것은 더 많은 divitis를 의미하지만 아마도 이것을 올바르게 수행하는 가장 깨끗한 방법 일 것입니다.

흥미롭게 도이 문제에 대한 내가 가장 좋아하는 솔루션은 아직 여기에 언급되지 않았습니다 : float 사용.

html :

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

CSS :

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

여기를 참조하십시오 : http://codepen.io/anon/pen/Iphol

부모에서 동적 높이가 필요한 경우 플로팅해야하므로 다음과 같이 간단히 바꾸십시오 height:100px;.float:left;

정답을 알기 전에 찾은 대체 솔루션 은 부모 요소에 투명한 테두리 를 추가하는 것 입니다.

상자는 여분의 픽셀을 사용합니다 ...

.parent {
    border:1px solid transparent;
}

적절한 경우 top대신 margin-top다른 방법을 사용 하는 것이 가능합니다.