Why overflow:hidden can’t prevent margin collapsing in sibling divs as display:inline-block?












1















As far as I know, overflow: hidden and display:inline-block can both establish a new blocking format context,and blocking format context can prevent margin collapse.



But overflow:hidden can’t prevent margin collapsing between sibling divs as display:inline-block.






<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1 {
background-color: red;
margin-bottom: 100px;
}

.div2 {
background-color: orange;
margin-top: 200px;
overflow: hidden;
}
</style>
</head>

<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>

</html>





I wished the overflow:hidden on .div2 can establish a block format context and the margin between .div1 and .div2 should be 300px. But it didn't work. Why?










share|improve this question

























  • What is the question here?

    – disinfor
    Jan 1 at 16:01











  • show the code of such sitatuion. There is no margin collapsing between inline-block element with or without oveflow hidden

    – Temani Afif
    Jan 1 at 16:04













  • @disinfor why overflow:hidden can’t prevent collapsing margin as display:inline-block? they both establish a block format context.

    – T.T
    Jan 1 at 16:05











  • @TemaniAfif hi, I just added the codes. Now I understand that no margin collapsing between inline-block elements. But I still don’t know why overflow:hidden won’t work as I expected.

    – T.T
    Jan 1 at 16:15
















1















As far as I know, overflow: hidden and display:inline-block can both establish a new blocking format context,and blocking format context can prevent margin collapse.



But overflow:hidden can’t prevent margin collapsing between sibling divs as display:inline-block.






<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1 {
background-color: red;
margin-bottom: 100px;
}

.div2 {
background-color: orange;
margin-top: 200px;
overflow: hidden;
}
</style>
</head>

<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>

</html>





I wished the overflow:hidden on .div2 can establish a block format context and the margin between .div1 and .div2 should be 300px. But it didn't work. Why?










share|improve this question

























  • What is the question here?

    – disinfor
    Jan 1 at 16:01











  • show the code of such sitatuion. There is no margin collapsing between inline-block element with or without oveflow hidden

    – Temani Afif
    Jan 1 at 16:04













  • @disinfor why overflow:hidden can’t prevent collapsing margin as display:inline-block? they both establish a block format context.

    – T.T
    Jan 1 at 16:05











  • @TemaniAfif hi, I just added the codes. Now I understand that no margin collapsing between inline-block elements. But I still don’t know why overflow:hidden won’t work as I expected.

    – T.T
    Jan 1 at 16:15














1












1








1








As far as I know, overflow: hidden and display:inline-block can both establish a new blocking format context,and blocking format context can prevent margin collapse.



But overflow:hidden can’t prevent margin collapsing between sibling divs as display:inline-block.






<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1 {
background-color: red;
margin-bottom: 100px;
}

.div2 {
background-color: orange;
margin-top: 200px;
overflow: hidden;
}
</style>
</head>

<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>

</html>





I wished the overflow:hidden on .div2 can establish a block format context and the margin between .div1 and .div2 should be 300px. But it didn't work. Why?










share|improve this question
















As far as I know, overflow: hidden and display:inline-block can both establish a new blocking format context,and blocking format context can prevent margin collapse.



But overflow:hidden can’t prevent margin collapsing between sibling divs as display:inline-block.






<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1 {
background-color: red;
margin-bottom: 100px;
}

.div2 {
background-color: orange;
margin-top: 200px;
overflow: hidden;
}
</style>
</head>

<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>

</html>





I wished the overflow:hidden on .div2 can establish a block format context and the margin between .div1 and .div2 should be 300px. But it didn't work. Why?






<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1 {
background-color: red;
margin-bottom: 100px;
}

.div2 {
background-color: orange;
margin-top: 200px;
overflow: hidden;
}
</style>
</head>

<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>

</html>





<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1 {
background-color: red;
margin-bottom: 100px;
}

.div2 {
background-color: orange;
margin-top: 200px;
overflow: hidden;
}
</style>
</head>

<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>

</html>






css css3






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 1 at 16:22









Temani Afif

75.5k94386




75.5k94386










asked Jan 1 at 15:59









T.TT.T

366




366













  • What is the question here?

    – disinfor
    Jan 1 at 16:01











  • show the code of such sitatuion. There is no margin collapsing between inline-block element with or without oveflow hidden

    – Temani Afif
    Jan 1 at 16:04













  • @disinfor why overflow:hidden can’t prevent collapsing margin as display:inline-block? they both establish a block format context.

    – T.T
    Jan 1 at 16:05











  • @TemaniAfif hi, I just added the codes. Now I understand that no margin collapsing between inline-block elements. But I still don’t know why overflow:hidden won’t work as I expected.

    – T.T
    Jan 1 at 16:15



















  • What is the question here?

    – disinfor
    Jan 1 at 16:01











  • show the code of such sitatuion. There is no margin collapsing between inline-block element with or without oveflow hidden

    – Temani Afif
    Jan 1 at 16:04













  • @disinfor why overflow:hidden can’t prevent collapsing margin as display:inline-block? they both establish a block format context.

    – T.T
    Jan 1 at 16:05











  • @TemaniAfif hi, I just added the codes. Now I understand that no margin collapsing between inline-block elements. But I still don’t know why overflow:hidden won’t work as I expected.

    – T.T
    Jan 1 at 16:15

















What is the question here?

– disinfor
Jan 1 at 16:01





What is the question here?

– disinfor
Jan 1 at 16:01













show the code of such sitatuion. There is no margin collapsing between inline-block element with or without oveflow hidden

– Temani Afif
Jan 1 at 16:04







show the code of such sitatuion. There is no margin collapsing between inline-block element with or without oveflow hidden

– Temani Afif
Jan 1 at 16:04















@disinfor why overflow:hidden can’t prevent collapsing margin as display:inline-block? they both establish a block format context.

– T.T
Jan 1 at 16:05





@disinfor why overflow:hidden can’t prevent collapsing margin as display:inline-block? they both establish a block format context.

– T.T
Jan 1 at 16:05













@TemaniAfif hi, I just added the codes. Now I understand that no margin collapsing between inline-block elements. But I still don’t know why overflow:hidden won’t work as I expected.

– T.T
Jan 1 at 16:15





@TemaniAfif hi, I just added the codes. Now I understand that no margin collapsing between inline-block elements. But I still don’t know why overflow:hidden won’t work as I expected.

– T.T
Jan 1 at 16:15












1 Answer
1






active

oldest

votes


















0














Margins between sibling block formatting contexts established by block boxes don't intrude into either context, so margin collapsing is allowed to happen as normal. The kind of margin collapsing that's prevented by creating a new BFC is that between the parent that establishes the BFC, and any in-flow block-level child boxes.



The reason margins between inline-blocks don't collapse is not because they establish block formatting contexts, but because margins between siblings only collapse when they are block-level boxes, never when they are inline-level boxes (inline, inline-block, inline-table or whatever).






share|improve this answer
























  • Thx. Now I almost get it. But I still have one question. I found that display:inline-block elements are block format context but not inline format context. So I'm confused about if they should also have margin collapsing.

    – T.T
    Jan 1 at 16:20











  • @T.T: Yeah, that's a common source of confusion. Does this make things clearer for you?

    – BoltClock
    Jan 1 at 16:21











  • Thx. So inline-block elements are inline-level boxes as a result of that their contents don’t participate in their parents’ IFC?

    – T.T
    Jan 1 at 16:38











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996880%2fwhy-overflowhidden-can-t-prevent-margin-collapsing-in-sibling-divs-as-displayi%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














Margins between sibling block formatting contexts established by block boxes don't intrude into either context, so margin collapsing is allowed to happen as normal. The kind of margin collapsing that's prevented by creating a new BFC is that between the parent that establishes the BFC, and any in-flow block-level child boxes.



The reason margins between inline-blocks don't collapse is not because they establish block formatting contexts, but because margins between siblings only collapse when they are block-level boxes, never when they are inline-level boxes (inline, inline-block, inline-table or whatever).






share|improve this answer
























  • Thx. Now I almost get it. But I still have one question. I found that display:inline-block elements are block format context but not inline format context. So I'm confused about if they should also have margin collapsing.

    – T.T
    Jan 1 at 16:20











  • @T.T: Yeah, that's a common source of confusion. Does this make things clearer for you?

    – BoltClock
    Jan 1 at 16:21











  • Thx. So inline-block elements are inline-level boxes as a result of that their contents don’t participate in their parents’ IFC?

    – T.T
    Jan 1 at 16:38
















0














Margins between sibling block formatting contexts established by block boxes don't intrude into either context, so margin collapsing is allowed to happen as normal. The kind of margin collapsing that's prevented by creating a new BFC is that between the parent that establishes the BFC, and any in-flow block-level child boxes.



The reason margins between inline-blocks don't collapse is not because they establish block formatting contexts, but because margins between siblings only collapse when they are block-level boxes, never when they are inline-level boxes (inline, inline-block, inline-table or whatever).






share|improve this answer
























  • Thx. Now I almost get it. But I still have one question. I found that display:inline-block elements are block format context but not inline format context. So I'm confused about if they should also have margin collapsing.

    – T.T
    Jan 1 at 16:20











  • @T.T: Yeah, that's a common source of confusion. Does this make things clearer for you?

    – BoltClock
    Jan 1 at 16:21











  • Thx. So inline-block elements are inline-level boxes as a result of that their contents don’t participate in their parents’ IFC?

    – T.T
    Jan 1 at 16:38














0












0








0







Margins between sibling block formatting contexts established by block boxes don't intrude into either context, so margin collapsing is allowed to happen as normal. The kind of margin collapsing that's prevented by creating a new BFC is that between the parent that establishes the BFC, and any in-flow block-level child boxes.



The reason margins between inline-blocks don't collapse is not because they establish block formatting contexts, but because margins between siblings only collapse when they are block-level boxes, never when they are inline-level boxes (inline, inline-block, inline-table or whatever).






share|improve this answer













Margins between sibling block formatting contexts established by block boxes don't intrude into either context, so margin collapsing is allowed to happen as normal. The kind of margin collapsing that's prevented by creating a new BFC is that between the parent that establishes the BFC, and any in-flow block-level child boxes.



The reason margins between inline-blocks don't collapse is not because they establish block formatting contexts, but because margins between siblings only collapse when they are block-level boxes, never when they are inline-level boxes (inline, inline-block, inline-table or whatever).







share|improve this answer












share|improve this answer



share|improve this answer










answered Jan 1 at 16:15









BoltClockBoltClock

523k12911631199




523k12911631199













  • Thx. Now I almost get it. But I still have one question. I found that display:inline-block elements are block format context but not inline format context. So I'm confused about if they should also have margin collapsing.

    – T.T
    Jan 1 at 16:20











  • @T.T: Yeah, that's a common source of confusion. Does this make things clearer for you?

    – BoltClock
    Jan 1 at 16:21











  • Thx. So inline-block elements are inline-level boxes as a result of that their contents don’t participate in their parents’ IFC?

    – T.T
    Jan 1 at 16:38



















  • Thx. Now I almost get it. But I still have one question. I found that display:inline-block elements are block format context but not inline format context. So I'm confused about if they should also have margin collapsing.

    – T.T
    Jan 1 at 16:20











  • @T.T: Yeah, that's a common source of confusion. Does this make things clearer for you?

    – BoltClock
    Jan 1 at 16:21











  • Thx. So inline-block elements are inline-level boxes as a result of that their contents don’t participate in their parents’ IFC?

    – T.T
    Jan 1 at 16:38

















Thx. Now I almost get it. But I still have one question. I found that display:inline-block elements are block format context but not inline format context. So I'm confused about if they should also have margin collapsing.

– T.T
Jan 1 at 16:20





Thx. Now I almost get it. But I still have one question. I found that display:inline-block elements are block format context but not inline format context. So I'm confused about if they should also have margin collapsing.

– T.T
Jan 1 at 16:20













@T.T: Yeah, that's a common source of confusion. Does this make things clearer for you?

– BoltClock
Jan 1 at 16:21





@T.T: Yeah, that's a common source of confusion. Does this make things clearer for you?

– BoltClock
Jan 1 at 16:21













Thx. So inline-block elements are inline-level boxes as a result of that their contents don’t participate in their parents’ IFC?

– T.T
Jan 1 at 16:38





Thx. So inline-block elements are inline-level boxes as a result of that their contents don’t participate in their parents’ IFC?

– T.T
Jan 1 at 16:38




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996880%2fwhy-overflowhidden-can-t-prevent-margin-collapsing-in-sibling-divs-as-displayi%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas