왜 이 CSS 마진탑 스타일이 작동하지 않습니까?

왜 이 CSS 마진탑 스타일이 작동하지 않습니까?

추가하려고 했습니다.margin의 값div 인타내에의 에.div최상위 값을 제외하고는 모두 정상적으로 작동합니다, 무시되는 것 같습니다.하지만 왜 그랬을까?

내가 기대했던 것:

내가 얻는 것:

코드:

#outer {
  width: 500px;
  height: 200px;
  background: #FFCCCC;
  margin: 50px auto 0 auto;
  display: block;
}

#inner {
  background: #FFCC33;
  margin: 50px 50px 50px 50px;
  padding: 10px;
  display: block;
}

<div id="outer">
  <div id="inner">
    Hello world!
  </div>
</div>

W3 학교들은 왜 그런지에 대한 설명이 없습니다.margin이렇게 동작합니다.

당신은 실제로 상단 여백을 보고 있습니다.#inner요소가 상단 모서리로 접힙니다.#outer소요, 만 .#outer여백을 그대로 유지합니다(이미지에 표시되지 않음).두 상자의 위쪽 가장자리는 여백이 동일하기 때문에 서로 동일합니다.

W3C 사양의 관련 사항은 다음과 같습니다.

8.3.1 붕괴 여유도

CSS에서 두 개 이상의 상자(동남아일 수도 있고 아닐 수도 있음)의 인접한 여백은 하나의 여백을 형성하기 위해 결합될 수 있습니다.이런 식으로 결합된 마진을 붕괴라고 하고, 그 결과로 결합된 마진을 붕괴된 마진이라고 합니다.

인접한 수직 여백 축소 [...]

다음과 같은 경우에만 두 여백이 인접합니다.

• 둘 다 동일한 블록 형식 컨텍스트에 참여하는 유입 블록 수준 상자에 속합니다.
• 라인 박스, 간격, 패딩 및 테두리가 구분되지 않음
• 둘 다 수직으로 구부러진 상자 모서리에 속합니다. 즉, 다음 쌍 중 하나를 형성합니다.
  • 상자의 위쪽 여백 및 첫 번째 유입 하위 항목의 위쪽 여백

다음 중 하나를 수행하여 여백이 축소되는 것을 방지할 수 있습니다.

• 중 하나를 띄웁니다.div
• 의 둘중하를만다 중 하나를 .div요소:인라인 블록
• 집합 ~(또는 다른 값)visible)

위의 옵션이 마진 축소를 방지하는 이유는 다음과 같습니다.

• 플로트 상자와 다른 상자 사이의 여백은 무너지지 않습니다(플로트와 유입된 하위 상자 사이에도 없음).
• 새 블록 형식 컨텍스트를 설정하는 요소(예: 플로트 및 '보이는' 요소가 아닌 '오버플로'가 있는 요소)의 여백은 유입 자식과 함께 무너지지 않습니다.
• 인라인 블록 상자의 여백은 유입된 하위 항목에서도 무너지지 않습니다.

왼쪽 및 오른쪽 여백이 예상대로 작동하는 이유는 다음과 같습니다.

수평 여백은 절대 무너지지 않습니다.

사용해 보십시오.display: inline-block;div이와 같은 경우:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

BoltClock의 대답은 꽤 확실합니다.여기서 저는 이 문제에 대한 몇 가지 해결책을 추가하고 싶습니다.이 w3c_discing 마진을 확인합니다.녹색 부분은 이 문제를 어떻게 해결할 수 있는지에 대한 잠재적인 생각입니다.

솔루션 1

플로트 상자와 다른 상자 사이의 여백은 무너지지 않습니다(플로트와 유입된 하위 상자 사이에도 없음).

그것은 제가 추가할 수 있다는 것을 의미합니다.float:left둘 중 어느 쪽이든#outer또는#inner 데모 1

또한 을 알아차립니다.float 무화것입다니할이 가 됩니다.auto

솔루션 2

새 블록 형식 컨텍스트를 설정하는 요소(예: 플로트 및 '보이는' 요소가 아닌 '오버플로'가 있는 요소)의 여백은 유입 자식과 함께 무너지지 않습니다.

visible를 overflow: hidden안으로#outer그리고 이 방법은 꽤 간단하고 점잖게 보입니다.마음에 들어요.

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

솔루션 3

절대적으로 배치된 상자의 여백은 (유입된 자식의 경우에도) 무너지지 않습니다.

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

또는

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

두 입니다.div

솔루션 4

인라인 블록 상자의 여백은 유입된 하위 항목에서도 무너지지 않습니다.

엔더스킬과 동일합니다.

솔루션 5

유입 블록 수준 요소의 하단 여백은 해당 요소에 공백이 없는 경우 다음 유입 블록 수준 형제의 상단 여백과 함께 항상 축소됩니다.

이것은 형제자매 간의 붕괴 마진이기 때문에 질문과 별로 관련이 없습니다.그것은 일반적으로 탑 박스가 가지고 있는 경우를 의미합니다.margin-bottom: 30px에는 그고형상자는제가 있습니다.margin-top: 10px의 총 은 이들간의총마같다다습니과음은진▁between입니다.30px에 40px.

솔루션 6

요소에 상단 경계가 없고 상단 패딩이 없으며 하위 항목에 공백이 없는 경우 유입 블록 요소의 상단 여백은 첫 번째 유입 블록 수준 하위 항목의 상단 여백과 함께 축소됩니다.

이것은 매우 흥미롭고 저는 단지 하나의 맨 위 경계선을 추가할 수 있습니다.

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;
    
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    
}

또한.<div>기본적으로 블록 레벨이므로 일부러 선언할 필요가 없습니다.저의 초보적인 명성 때문에 2개 이상의 링크와 이미지를 올리지 못해서 죄송합니다.적어도 다음에 비슷한 것을 볼 때 문제가 어디서 발생하는지는 알고 있을 것입니다.

사용자가 가지고 있는 것이 작동하지 않는 이유는 확실하지 않지만 추가할 수 있습니다.overflow: auto;div.

이유는 정확히 알 수 없지만, 내부 CSS를 다음으로 변경합니다.

display: inline-block;

효과가 있는 것 같습니다.

를 padding#outer그건 효과가 있다.데모:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}

<div id="outer">
    <div id="inner">
        Hello world!
    </div>
</div>

새 블록 형식 지정 컨텍스트 만들기

사용할 수 있습니다.display: flow-root새 블록 형식 지정 컨텍스트를 만들 때 포함된 요소를 통해 여백이 축소되는 것을 방지하기 위해 상위 요소에 있습니다.

오버플로 속성 값을 auto로 변경하거나 flexbox를 사용하면 동일한 효과를 얻을 수 있습니다.

https://codepen.io/rachelandrew/pen/VJXjEp

"왜"(마진이 감소하는 것이어야 함)에는 대답하지 않지만, 여러분이 하려는 일을 하는 가장 쉬운/가장 논리적인 방법은 단지 외부 div에 추가하는 것입니다.

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    padding-top: 50px;
}
#inner {
    background:#FFCC33;
    margin:0px 50px 50px 50px;
    padding:10px;
}

<div id="outer">
    <div id="inner">
        Hello world!
    </div>
</div>

마이너 노트 - 디비를 설정할 필요가 없습니다.display:block;당신 코드에 차단하지 말라는 다른 내용이 없는 한.

사용해 보십시오.

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}

<div id="outer">
    <div id="inner">
        Hello world!
    </div>
</div>

행운을 빕니다.

사용하다padding-top:50px외제점을 위하여.이와 같은 것:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

참고: 패딩은 디브의 크기를 증가시킵니다.이 경우 div의 크기가 중요한 경우 특정 높이를 가져야 하는지 여부를 의미합니다. 높이를 50px 줄입니다.:

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

#inner div의 위치 속성을 relative로 설정하는 것도 효과를 얻는 데 도움이 될 것 같습니다.하지만 어쨌든 IE9에 대한 질문과 최신 Google Chrome에 붙여놓은 원래 코드를 사용해 봤는데 이미 수정 없이 원하는 효과를 제공합니다.

시도해 보셨습니까! 무엇보다도 중요합니다. 그것은 모든 것을 강요할 것입니다.

margin:50px 50px 50px 50px !important;

마진 축소 문제가 있는 경우 이 문제를 해결하기 위해 추가할 수 있습니다.display: flow-root;상위 컨테이너로 이동합니다.

그 외에도 마진톱이 무시되는 경우에는 마이너스 값을 사용하여 마진톱을 시도합니다. 예를 들어 다음과 같습니다.margin-top: -2px;

빠른 수정을 위해, 어린이 요소를 다음과 같이 포장해보세요.div와 같은 - 런소요이▁- -

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

여inner디브는 패딩으로 인해 무너지지 않을 것입니다.1pxouter그리고.innerdiv.은 브논리로당신은을 갖게 될 입니다.1px 추가inner디브

언급URL : https://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work