Henry
Henry
PostsComments
KPCKevin Powell - Community
Created by Henry on 5/20/2024 in #front-end
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? šŸ¤”
9 replies