Kevin Powell - Community•7mo ago

Understanding the behavior of a container's margins and paddings when parent height is set to 100%

I'll appreciate your insights on what's going on under the hood, and any advice to improve the CSS. Anything helps ❤️ 👋 Hi folks, in the link provided below you'll find a basic responsive layout, with a fixed header and footer, and a flex container of boxes. https://codepen.io/henrytuxdev/pen/BaeKKGr My goal is to keep the boxes visible once they wrap and overflow their parent container in smaller viewports (< 600px). This implies creating some negative space in between the header and the footer to accommodate the content. Try out these two definitions of styles for the same class, .container: STYLES A

/* 
margin-top: header's height
margin-bottom: footer's height
*/
.container {
    margin: 56px 0px 70px;
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
}

/* 
margin-top: header's height
margin-bottom: footer's height
*/
.container {
    margin: 56px 0px 70px;
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
}

STYLES B

/*
padding-top: header's height + 10px padding between header and content
padding-bottom: footer's height + 10px padding between footer and content
*/
.container {
    padding: 66px 10px 80px;
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/*
padding-top: header's height + 10px padding between header and content
padding-bottom: footer's height + 10px padding between footer and content
*/
.container {
    padding: 66px 10px 80px;
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

- When using Styles A along with

html, body, #root {
  height: 100%;
}

html, body, #root {
  height: 100%;
}

the margin-top is working as expected, but the margin-bottom is completely collapsed and pushed out of the viewport (See screenshot). As a result, the last box inside the container will be hidden partially under the footer. Removing the height from the parent will align the boxes, and the margin-bottom will work as intended - By contrast, when using Styles B, regardless of wether the parent containers have a height of 100% or not, the padding will align the boxes Question 1: Am I dealing with collapsing margins? Is the margin-bottom not being respected because of the containing block? Question 2: Test the layout with parents styles set to height: 100%; display: flex. Paddings and margins seem to be ignored, but why? 🤔

Henry

CodePen

BaeKKGr

...

4 Replies

b1mind•7mo ago

You can use pos: sticky maybe and not have to worry about margin. That way you can also not set heights too Let your content determine height

b1mind•7mo ago

Something like this https://codepen.io/b1mind/pen/mdYPOpW?editors=0100

Brent Morton

CodePen

mdYPOpW

...

b1mind•7mo ago

Sidenote: collapsing margins is only a thing when you have two margin-block* on a block element that would collide. stacking <p> elements is the true example of this I would also take some time to learn Grid as I think it could be better in this layout. #depends.

HenryOP•7mo ago

@b1mind Hey there! Thank you for taking the time to revise the example. You’re right, sticky is a game-changer in this scenario. Can’t believe it slipped my mind. Your advice is truly appreciated, I'll definitely have to dive deeper into Grid one day (I developed the bad habit of relying on flex for too long). As for the margin-bottom mystery, it’s still got me scratching my head a bit. I’ve been revisiting Kevin’s playlists on the topic, but I haven’t figured it out yet: https://www.youtube.com/watch?v=qKiz9gdJdr8 https://www.youtube.com/watch?v=EhbZGV2dqZ4&list=PL4-IK0AVhVjN1x-G7WHXs4y_Jo-MUocgf

Kevin Powell

YouTube

Collapsing margins - what they are and how to deal with them

Collapsing margins are incredibly frustrating when you don't understand them, but once you know how they work, and in what situations, you can find solutions to work around them. Codepen from this video: https://codepen.io/kevinpowell/pen/NWdOyrP CSS Working Group Mistakes made in CSS: https://wiki.csswg.org/ideas/mistakes More information on ...

Kevin Powell

YouTube

Margin and Padding Deep Dive: The basics

Margins and padding cause a lot of confusion amongst new developers. This video is the start of a deep dive miniseries taking a look at them. This video is really a look at the very basics of margins and padding, what each one do, and what the differences are between the two of them. I also take a look at how auto margins work, and why & how w...

Gaming

Programming

Understanding the behavior of a container's margins and paddings when parent height is set to 100%