Why overflow:hidden can’t prevent margin collapsing in sibling divs as display:inline-block?
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?
css css3
add a comment |
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?
css css3
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
add a comment |
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?
css css3
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
css css3
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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).
Thx. Now I almost get it. But I still have one question. I found thatdisplay: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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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).
Thx. Now I almost get it. But I still have one question. I found thatdisplay: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
add a comment |
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).
Thx. Now I almost get it. But I still have one question. I found thatdisplay: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
add a comment |
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).
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).
answered Jan 1 at 16:15
BoltClock♦BoltClock
523k12911631199
523k12911631199
Thx. Now I almost get it. But I still have one question. I found thatdisplay: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
add a comment |
Thx. Now I almost get it. But I still have one question. I found thatdisplay: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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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