Abhisek Panda

Understanding CSS Box Model

Abhisek Panda's photo
Abhisek Panda
·

3 min read

Understanding CSS Box Model

Photo by Kelli McClintock on Unsplash

So you have started your CSS journey. You have learned about CSS Selectors and all the properties that you are going to use to make the unique design in your mind.

You are ready to implement all the CSS properties that you have learned. You have written all the codes. Suddenly you see that the design is not looking as good as you think in your mind. You have to spend minutes trying to figure out what has gone wrong.

After all this fiasco, you find out that the properties are not used in a proper way.

To get rid of all this madness(not multiverse of madness), you should learn the CSS box model. Here is the guide to understanding the box model.

The first thing you need to understand is that all the HTML code that you write is kept inside a box. Inside the box is your content like paragraph, links, etc.

Now your content is inside a box. The size of the box depends upon how much content is present. 

//HTML
<a href="#">Here is your content</a>

//CSS:
a{
  border: 2px solid blue;
  font-family: sans-serif;
}

Output

image.png

Now let's write a very bigger text:

image.png

See how the box got bigger by just adding some text to the link or a.

Now lets another element just below it. 

<a href="#">Here is your content getting bigger just by writing some words in it.</a>

<p>These are some words that we will be using to understand Box model.</p>

Output:

image.png

Now comes the interesting part. As you have understood that all the elements are inside a box.

To understand clearly, this is the picture that we will be using:

image.png

We have seen that, if we increase our content the box gets bigger. But in order to stylize the whole page. We need to understand padding, border and margin.

For better understanding let's give the p tag a border: 

//HTML
<a href="#">Here is your content getting bigger just by writing some words in it.</a>

<p>These are some words that we will be using to understand Box model.</p>

//CSS
*{
   font-family: sans-serif;
  padding: 0;
  margin:0;
}
a{
  border: 2px solid blue;
  font-family: sans-serif;
}

p{
  border: 2px solid red;
}

OUTPUT

image.png

Both a & p tags have border of blue and red.

To give spaces between the border and the content, we use padding. Because is the middle man between border and content.

Let's give padding to both of them. 

*{
   font-family: sans-serif;
  padding: 0;
  margin:0;
}
a{
  border: 2px solid blue;
  font-family: sans-serif;
  padding: 5px;
}

p{
  border: 2px solid red;
  padding: 5px;
}

OUTPUT

image.png

But we see that the a tag border is overlapping with the p border. To give the distance between two elements we will use margin. Let's give margin to only the p tag from the top. 

*{
   font-family: sans-serif;
  padding: 0;
  margin:0;
}
a{
  border: 2px solid blue;
  font-family: sans-serif;
  padding: 5px;  
}

p{
  border: 2px solid red;
  padding: 5px;
 margin-top: 2rem;
}

OUTPUT

image.png

So the TLDR version of CSS box model is that:

  • All the contents are present inside a box. The size of box increases when the contentincrease.

  • There is a line present between content and border which is known as padding. So give spacing inside we use padding. This is used for the stylization of button

  • To separate from two elements we use margin.

CSSbox-model