Learn CSS Flexbox by Building a Photo Gallery- Step 13 Question

tl;dr at bottom

In step 13, I added a border-bottom to the header element and it appears to have increased the height of the element despite having set everything to border-box. Adding the border pushed the img elements below it further down, and when I use the devtools to inspect the header element, it says that a 4px border-bottom was added but the height of the content did not reduce to accommodate it. If all CSS properties are set to border-box, then adding a border to an element should not increase its overall height, right? Shouldn’t the content shrink to accommodate the border and keep the overall element the same size?

Here is my CSS so far:

  • (star, not bullet point) {
    box-sizing: border-box;
    }

body {
margin: 0;
font-family: sans-serif;
background: #f5f6f7;
}

.header {
text-align: center;
text-transform: uppercase;
padding: 32px;
background-color: #0a0a23;
color: #fff;
border-bottom: 4px solid #fdb347;

.gallery img {
width: 100%;
max-width: 350px;
height: 300px;
}

Here is the preview and element inspection before adding the border-bottom:

image

Here is the preview and element inspection after adding the border-bottom:

image

Is it possibly because a height was not specified for the header element, so the border-box property did not restrict the element’s height? But I thought that the border-box property would still restrict width and height to whatever default value exists for an element if none is specified.

tl;dr set box sizing of all elements to border box, added a 4px border bottom to header, height of entire element appears to have increased by 4px (content did not shrink). Why? (all my code so far has passed, so I don’t think it’s due to an error on my part)

What would the default value be for a header element?