The CSS Box Model is the foundation of all CSS layouts. It defines how elements are sized, positioned, and displayed on a web page. My goal with this blog post is to help you understand the basics and jumpstart your journey for learning front-end development. We will cover the basic concepts of CSS Box Model, and understand the behaviour of elements!

Introduction

Before we learn anything, we understand this one simple statement

" Everything is a BOX. "

If you know a little bit of HTML, you would remember <div> element. What it does is it creates a simple block, inside which we can write content, modify how it looks and shapes it into any form.

Yeah! A circle or a blob is also, a simple <div> box with high border-radius attribute value. It's all boxes.

When laying out a webpage, the browser's rendering engine represents each element as a rectangular box. The CSS decides the layout, size, and other styling for that box.

Now, there are 4 parts/areas to this box, decided by their respective edges:

• Content Area

• Padding Area

• Border Area

• Margin Area

To explain the areas of the CSS Box Model, we take the analogy of an art painting

Content Area

This is where the content lives. It is bounded by a content edge, which can be controlled by the size of its parent, making it known as the "most variably sized area".
More on this later on.

For an art painting, this is the art piece at the centre of attraction for everybody to see.

Padding Area

In simple terms, it is the space between the content area and the border. It is bounded by a padding edge.

Remember, padding is inside the box and surrounds the content area. If our box has overflow rules set, such as overflow: auto or overflow: scroll, the scrollbars will occupy this space too.

You can change the padding of an element using padding: 20px; or specific sides by padding-left:10px;

Border Area

As simple as it sounds, the border surrounds the padding box and is the bounds of your box. By default in CSS, <div> Elements don't have borders. But you can add one using the shorthand property border: 2px dotted;

You can even adjust the width using border-width property

In an art piece, the border is the frame of the art painting and the space between the frame and the art piece is the padding.

Margin Area

Margin Area is the space around your box, defined by the margin property. It is bounded by the margin edge and is often used to separate the element from its neighbours. Properties like box-shadow and outline occupy this area.

You can add margins via the shorthand property margin: 20px; or be specific with margin-left: 69px;

More with Content Sizing

For understanding sizing, we imagine a simple block of text
<p> This is an example to help you understand content sizing </p>

and we have given it the styling of width: 50px; in CSS

Now, if the content is too big to fit in the box, it will overflow the content box area, the box is extrinsically sized. That means, when we give it a specific width or height to stay in, it will not change no matter if the content inside the box changes.

If we now remove the width: 50px; styling, then we can see the box gets bigger with the content box. So, as the content increases, the box increases in size. That means, the box is intrinsically sized and depends on the content.

This concept of "intrinsic sizing" and "extrinsic sizing" will help you develop on how you want your elements to behave.

Conclusion

As we go ahead with these basics, you will learn more on how to stylize elements to better represent our imagination.

If you want to learn more, I recommend the official MDN Docs for CSS and other interesting books from great CSS developers
Official CSS MDN Docs
Interesting Article from CSS Tricks

In the next blog posts, you will learn about CSS Selectors and other important concepts that go around with them. If you like what you read, please support us by giving us a like or a follow!

Let's keep experimentin'