CSS106 - The CSS Box Model

Hello Senior Devs!

This is Henry Uzor, and as always, it is my pleasant delight to bring you my weekly newsletter once again on Frontend Development. I sincerely apologize for not creating content for you lot last week, I had a lot on my plate at work. But I guess some days are like that, so I hope you forgive me.

Last time around, we talked about CSS Borders, and this week, we want to look at CSS Box Model. Coming off the back of talking about CSS Borders, I think it will be better if I talk about the entire CSS Box Model at this point and that’s why I choose this topic for this edition.

In CSS, there is something called the “Box Model” and the CSS Box Model is a fundamental concept that describes the layout and spacing of HTML elements on a web page. The Box Model defines how an element is structured and how its content, padding, border, and margin are all positioned and sized within the document. These four are referred to as the components of the Box Model. We should already know what “content” is all about, and the “border”, we have discussed in the previous edition of this newsletter. But we are yet to talk about the “margin” and “padding” concepts. In any case, we will need to consider these four components of the Box Model wholistically, for us to understand the concept.

COMPONENTS OF THE BOX MODEL

CSS is basically all about boxes as described in the picture above, and when writing CSS, this is something you will notice. Most HTML elements on your web page can be thought of as boxes sitting on top of other boxes (i.e., other elements). This is because the CSS Layout is mostly based on the Box Model, with each box or element taking up spaces on your web page and carrying the Box Model components. Although there are some elements known as “inline elements’ that don’t take up the entire width of the screen, but even these elements still follow the Box Model principle, albeit in a slightly different manner to “block elements”. The following are referred to as the components of the Box Model:

1.Content: The content of an element refers to the actual text, images, or other media contained within the element tags. It is the innermost part of the box and is defined by the width and height properties. Not to worry, I hope to discuss these width and height properties in detail in the next edition of this newsletter.

2.Padding: This is the space between the content and the element's border. It provides spatial separation, adding internal spacing around the content. The padding is controlled using the “padding” property and can also be set individually for each side (top, right, bottom, left) using “padding-top”, “padding-right”, “padding-bottom”, and “padding-left”.

All the padding properties can have the following values:

• “length” – this is in px, pt, cm, etc.
• “%” – this is in the percentage of the width of the containing element, with values ranging from 0 – 100.
• “inherit” – this specifies that the padding should be inherited from the parent element.

3.Border: This is the solid line that sets the boundaries of the content. The border surrounds the padding and content of an element, and it is defined by the “border” property, which sets the width, style, and color of the border. The border can also be set individually for each side using “border-top”, “border-right”, “border-bottom”, and “border-left”. I believe I did justice to this subject in the previous edition of the newsletter, but if you haven’t seen it, or would like to remind yourself about some of the things I talked about on the subject, here is the link:

4.Margin: This creates space outside and around the element's borders, providing separation between adjacent elements, in other words, elements next to or on top of each other. The margin component creates the outermost spacing and affects the positioning of elements relative to each other. The margin is controlled using the “margin” property and can also be set individually for each side using “margin-top”, “margin-right”, “margin-bottom”, and “margin-left”.

All the margin properties can have any of the following values:

• “auto” – this value is usually calculated by the browser.
• “length” – this is in px, pt, cm, etc.
• “%” – this is in the percentage of the width of the containing element, with values ranging from 0 – 100.
• “inherit” – this specifies that the size of the margin should be inherited from the parent element.

Note: It is important to note that when it comes to size, the “margin” and the “padding” properties both work in a similar fashion to the “border” property we discussed in the previous edition of this newsletter. All the stuff we talked about in that edition on how the shorthand property works, which sides are affected according to the number of values specified for the property, the secondary properties (top, right, bottom, and left), all of that, they all apply to the “margin” and the “padding” properties as well. The other features the “border” property has that the “margin” and the “padding” properties don’t have are those features that control appearance or visuals, such as the “border-width”, “border-style”, “border-color”, and “border-radius”. This is because while the “border” property is visual, the “margin” and the “padding” properties control void spaces and are not visual. You can only see their effect in the spaces around the element.

So instead of writing:

Where both “margin-top” and “margin-bottom” have the same value of “25px”, and both “margin-right” and “margin-left” have the same value of “50px”, hence, you can simply use the ‘margin’ shorthand property and write:

In another example, instead of writing:

You can simply use the ‘padding’ shorthand property and write:

I want to believe you’ve gotten the hang of it now, so let’s discuss another sub-topic on this subject.

UNDERSTANDING BOX-SIZING

When specifying a width value for your content you would think the total width of that element should include the content, padding, and border, excluding the margin. This phenomenon is known as the “box-sizing” property and interestingly, the default value of this property is the “content-box” value. So, when you specify a width value for an element, the content alone takes up the entire width value specified, and this happens whether you include the “box-sizing: content-box;” declaration on the element or not. However, you can modify this behavior by setting the “box-sizing: border-box;” declaration on the element, which makes the total width specified for the element includes the content, padding, and border.

CALCULATING THE TOTAL WIDTH AND HEIGHT

If for any reason you need to calculate the total width and height of an element, you need to consider the sum of the content, padding, border, and margin.

Total element width:

{margin-left} + {border-left} + {padding-left} + {width} + {padding-left} + {border-left} + {margin-left}

Total element height:

{margin-top} + {border-top} + {padding-top} + {width} + {padding-bottom} + {border-bottom} + {margin-bottom}

PRACTICAL USE OF THE BOX MODEL

The CSS Box Model is essential for understanding and controlling the spacing, layout, and size of elements on a web page. It allows you to precisely position and size elements by manipulating their content, padding, border, and margin. By applying appropriate values to these properties, you can create visually pleasing designs, manage spacing between elements, and control the overall structure and layout of your web page.

I have a question, folks. Do you know what time it is at about now? Well, of course, you’re right. Time to jump into to VS-Code and write some code:

Aside from the HTML document template elements, the only thing I wrote here basically, is a <h1> element and a <p> element, both placed inside a <div> element as you can see. Running this little piece of code on the browser, and you should be getting this result:

There is one thing I want you to observe here because our next discussion will touch on it. Observe the result closely and you will notice some form of space at the top and the bottom of the <h1> element. This is a custom <h1> element style that is added to all <h1> elements. In fact, every element in HTML has some form of custom styles they come with, and sometimes you may not notice these styles. But if you’ve got a keen eye for the smallest of details, you will notice these custom styles. And yes, of course, you can always alter these styles by writing your own CSS styles on these elements.

Now, let’s add some CSS Styles:

For the <body> element which covers the entire web page content, I used the “display”, “align-items”, and “justify-content” properties to set the rendered <div> content on the center of the web page. I also wrote a code to make the <h1> element centralized inside the <div>. As for the <p> element, first I justified the paragraph content, then I made the background “light-sky-blue”, the content width is set to 300px, a red solid border line that is 15px thick was added, and a padding and margin of 50px each were also added. Going live should produce the following result:

Very visible is the 15px red border line that runs round the paragraph content. You can also notice the space between the paragraph content and the border line, that is the padding. Also noticeable is the space between the border line and the header text above it, that is the margin. Now hit the “F12” key on your keyboard to access your “browser developer tools” so we can inspect the elements to observe some to these styles.

You will have access to the developer tools on your browser. This can be on the right side of the screen like mine in the picture above, as is often the case if you are using a chrome browser. This tool can also pop up at the bottom of your screen as is often the case if you are using a firefox browser. It can also pop up on the left side of the screen, where it pops up can be a function of your browser’s default position for it or as a result of the setting on the tool. But regardless of the part of the screen you have it, you should be able to still do the same inspections we are about to carry out.

(1)  Ensure you are on the “Elements” tab.

(2)  If you are not on the “Elements” tab, you can click here to select it.

(3)  Click the dropdown arrow key of the <div> element.

(4)  Hover your mouse cursor on the <h1> element.

You can now see the custom margin (top and bottom) all <h1> elements come with that I talked about earlier.

(6)  Now hover your mouse cursor on the <p> element.

(7)  You will find the space created by the 50px padding, this space is highlighted in green around the paragraph text.

(8) You will also find the space created by the 50px margin, this space is highlighted in orange just outside the border line.

One other thing you would notice is that the margin of the paragraph text overlays the margin of the heading text. This occurs because the margin thickness of the paragraph text is bigger than that of the heading text and this occurrence is known as “Margin Collapse”. The top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins. This does not happen on left and right margins! Only top and bottom margins!

Lastly, just in case I want the 300px width specified for the <p> element to cover the content, padding, and border, then first I’d have to include the “box-sizing: border-box;” declaration on the element. Then to understand the width distribution, I’d have to do a bit of mathematics. With the padding, and border both going around the content, this will result in the following:

{left-border} + {left-padding} + {content} + {right-padding} + {right-border} = 300px

Where: “left-margin”, “left-padding”, “right-padding”, and “right-margin” all equal 50px each, while the “left-border” and “right-border” both equal 15px each.

Hence; 15px + 50px + {content} + 50px + 15px = 300px

{content} +130px = 300px

{content} = 300px - 130px

{content} = 170px

So, the actual width of the content in this case will become 170px.

The following picture shows how the CSS code will now look like with the new declaration addition on line-12:

The following picture shows what will be displayed on the browser with this new declaration. Notice how the paragraph box becomes narrower, because the entire box is now 300px wide, rather than initially when only the text paragraph is taking up the entire 300px width:

CONCLUSION

The CSS Box Model is a fundamental concept in web development that defines the layout and spacing of HTML elements. Understanding how the content, padding, border, and margin interact and affect the overall size and position of elements is crucial for creating well-designed and visually appealing web pages. By utilizing these properties and values associated with the Box Model, you can control the spacing, layout, and overall structure of your web page to achieve the desired design and user experience.

And that’s a wrap, Folks! There you have it for this week! I hope you had fun. I always do!

Next time, our journey into the deep end of writing CSS code continues.

Feel free to drop your comments in the comments section and share this Newsletter with anyone you know that might be interested in learning about Frontend Development. If you have any questions you’d like to ask on any of the subjects I’ve discussed so far or anything that has to do with Frontend Development, I am just a DM away.

The weekend is still young, and I hope you had a great week. Until I come your way again next week, have a blessed and productive weekend. See you in a bit!

#FrontendDeveloper #CSS #Developer #SoftwareEngineer #YoungEngineer #YEFoN #NSE #Leadership #Service #Development