왜 이 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에서 두 개 이상의 상자(동남아일 수도 있고 아닐 수도 있음)의 인접한 여백은 하나의 여백을 형성하기 위해 결합될 수 있습니다.이런 식으로 결합된 마진을 붕괴라고 하고, 그 결과로 결합된 마진을 붕괴된 마진이라고 합니다.
인접한 수직 여백 축소 [...]
다음과 같은 경우에만 두 여백이 인접합니다.
- 둘 다 동일한 블록 형식 컨텍스트에 참여하는 유입 블록 수준 상자에 속합니다.
- 라인 박스, 간격, 패딩 및 테두리가 구분되지 않음
- 둘 다 수직으로 구부러진 상자 모서리에 속합니다. 즉, 다음 쌍 중 하나를 형성합니다.
- 상자의 위쪽 여백 및 첫 번째 유입 하위 항목의 위쪽 여백
다음 중 하나를 수행하여 여백이 축소되는 것을 방지할 수 있습니다.
위의 옵션이 마진 축소를 방지하는 이유는 다음과 같습니다.
- 플로트 상자와 다른 상자 사이의 여백은 무너지지 않습니다(플로트와 유입된 하위 상자 사이에도 없음).
- 새 블록 형식 컨텍스트를 설정하는 요소(예: 플로트 및 '보이는' 요소가 아닌 '오버플로'가 있는 요소)의 여백은 유입 자식과 함께 무너지지 않습니다.
- 인라인 블록 상자의 여백은 유입된 하위 항목에서도 무너지지 않습니다.
왼쪽 및 오른쪽 여백이 예상대로 작동하는 이유는 다음과 같습니다.
수평 여백은 절대 무너지지 않습니다.
사용해 보십시오.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
'programing' 카테고리의 다른 글
| [시스템] 유형을 찾을 수 없습니다.IO.압축.압축Level]: 이 유형을 포함하는 어셈블리가 로드되었는지 확인합니다. (0) | 2023.08.04 |
|---|---|
| 도커 런 잇 플래그란 무엇입니까? (0) | 2023.08.04 |
| Invoke-WebRequest로 모든 콘텐츠 표시 (0) | 2023.07.30 |
| 선 그림에 인라인 레이블을 배치하는 방법 (0) | 2023.07.30 |
| Slim PHP 및 GET 매개 변수 (0) | 2023.07.30 |