Mojeed Muslimat's blog
CSS Box Model; How it Works;

CSS Box Model; How it Works;

Mojeed Muslimat's photo
Mojeed Muslimat
·

5 min read

Understanding the Cascading Style Sheet (CSS) box model and how it functions is of paramount importance. In this article, I will discuss the CSS box model and its significance in designing and structuring web pages.

What's CSS Box Model?

Box Model is a fundamental concept in web design and layout that describes how every html element in the web page are structured in terms of dimensions and spacing.

These dimensions and spacing are generated from css properties.

Properties of Cascading stylesheet (CSS ) Box Model

There are basic properties of css box model which every beginner should know.

These properties include;

  • Content

  • Padding

  • Border

  • Margin

What are contents, Padding and Margin?

Let's take a case study

Imagine a scenario where your best friend gives you two boxes, each containing a pair of shoes as a gift.These boxes are beautifully wrapped with a love ribbon.You placed these boxes side by side with a little space separating them from one another

In this case,the pair of shoes in the boxes can be represented as the content in box model.

The space around this shoes within the box can be represented as the padding.

While the love ribbon that's wrapped around the box can be represented as the border.

And the little space outside the box that separates the two boxes placed side by side can be regarded as the margin.

We can say that the pair of shoes which I represented as the content is the html element displayed on the web page. The content can be text or images on the web page. The padding,border and the margin wraps around this content like a box.

Based on this case study,we simply understand what these properties in box model means and how this properties can play a crucial role in the creation of responsive layouts and design of a web page.

When do I need to use CSS box model?

You might wonder when to use padding,border or margin.

Here's a quick guide:

  • Use padding when creating a space around a content.

  • Use margin when creating a space between two or more contents.

  • Use border to customize styling of choice around the content(i.e html element)

  • Note,be cautious of the way you use padding,border or margin as this may affect the overall dimension of a web page if not used correctly.

Best Approach for CSS box model

There are two major approaches for css box model. They include:

  • Content-box model Approach

  • Border-box model approach.

Content-box Model

Content-box model is a concept of box model that calculates the element's size based solely on the width and height without considering padding,border or margin.

How does content-box model works?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
    <style>
 img { width:700px;
  height:500px;
  padding:10px;
  margin:15px;
}
    </style>
</head>
<body>
    <div>
        <!-- do not forget to import an image to your code editor. Also take note of the file path where you import the image to.-->
        <img src="s.jpg" alt="">
    </div>
</body>
</html>

The width and height determines the size of the content area.

Consider this image above being given a width of 700px and a height of 500px. This means that the width and height of this image has been specified as the size of the image.

Adding padding,border or margin increases the overall size of the image.

Lets assume that we added padding of 10px and a margin of 15px

To calculate the total size of this image,you will sum up all the properties starting from width down to the margin.

Width + padding-right + padding-left + margin-right + margin-left = total width size

700px+ 10px + 10px + 15px + 15px = 750px

Height + padding-top + padding-bottom + margin-top + margin-bottom = total height size

500px + 10px + 10px + 15px + 15px . = 550px

With this, you can deduce that the size of the image increased after adding the padding and the margin.

In summary, content-box models requires calculations and it can be time-consuming.Most importantly, considerations has to be put in place when adding padding, margin or border.

Border-box model approach

Border-box model can also be referred to as alternative box model.

This involves setting box property to border-box.

Syntax

*{box-sizing: border-box;}

When the box property is being set to border-box,it calculates the size of an html element based on width and height while considering the padding, border or margin added.

How does border-box model works?

Consider the previous example given;

In the case for border-box, the total width of the element remains unchanged even after adding the values of padding and margin.

Setting the box property to border-box automatically calculates the size and whatever values of padding,border or margin added to the width or the height it still remains unchanged.

This model can be helpful for more predictable and easier-to-manage layout in css.

Which model do you think is easier?

Is it the content-box model that requires you to calculate or the border-box that automatically calculates the dimensions irrespective of the values added ?

Why Use the CSS box model?

  • It is useful in creating responsive designs that adapt to different screen sizes.

  • Useful for styling; Border enables the customization of style of choice to our content.

  • Achieving well spaced and attractive designs.

In summary, understanding how to use box model is essential for creating responsive web design and layouts.

Consider other CSS properties like flexbox and text alignment for tasks like centering elements, instead of relying solely on padding or margin.

I hope this article was helpful.If you have any question regarding this article, feel free to write them in the comment box.

Web DevelopmentCSSHTML5