CSS Box Model – Very Simple Examples

Welcome to a quick tutorial and examples of the CSS Box Model. Having trouble with the dimensions of HTML elements? Well, it’s time to throw the “CSS is difficult” illusion away.


Nearly all HTML elements are rendered according to the CSS box model, and it has 4 layers:

  1. Contents are at the center of the box.
  2. Padding space around the contents.
  3. Borders surround the contents and padding.
  4. Lastly, margin space outside the element.

Yes, just master the box model, and you will have no trouble with the dimensions of HTML elements. Read on for more!

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Box Model Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

CSS BOX MODEL EXAMPLES

All right, let us now get into the examples of the CSS box model.

 

1) BASIC BOX MODEL

1-basic-box.html
<!-- (A) HTML -->
<div id="demoA">Dummy Content</div>

<!-- (B) CSS -->
<style>
#demoA {
  /* (B1) FIRST LAYER - CONTENT */
  width: 200px; height: 100px;
  /* (B2) SECOND LAYER - PADDING */
  padding: 20px;
  /* (B3) THIRD LAYER - BORDER */
  border: 5px solid blue;
  /* (B4) FORTH LAYER - MARGIN */
  margin: 30px;
  /* (B5) DOES NOT MATTER */
  background-color: lightyellow;
}
</style>
Dummy Content

The box model is that simple –

  • First layer – The text Dummy Content. By default, the browser will automatically determine the dimensions, setting the width and height are optional.
  • Second layer – padding: 20px
  • Third layer –border: 5px solid blue
  • Fourth layer – margin: 30px

Go ahead – Download the examples, change the dimensions of each layer and see for yourself.

 

2) BOX MODEL ON IMAGES

2-images.html
<!-- (A) HTML -->
<img id="demoB" src="wamen.jpg"/>
 
<!-- (B) CSS -->
<style>
#demoB {
  /* (B1) FIRST LAYER - IMAGE */
  width: 300px; height: 200px;
  /* (B2) SECOND LAYER - PADDING */
  padding: 20px;
  /* (B3) THIRD LAYER - BORDER */
  border: 5px solid blue;
  /* (B4) FORTH LAYER - MARGIN */
  margin: 30px;
  /* (B5) DOES NOT MATTER */
  background-color: lightyellow;
}
</style>

Yes, the same old box model also applies to images. But instead of a block of text, the first layer is now the image itself.

 

 

3) BOX MODEL ON LISTS

3-lists.html
<!-- (A) HTML LIST -->
<ul id="demoC">
  <li>Item.</li>
  <li>Another Item.</li>
</ul>

<!-- (B) CSS -->
<style>
/* (B1) <UL> ITSELF IS A BOX */
#demoC {
  padding: 10px;
  border: 3px solid red;
  margin: 20px;
  background: lightcyan;
}
 
/* (B2) <LI> ARE ALSO BOXES */
#demoC li {
  padding: 10px;
  border: 3px solid green;
  margin: 20px;
  background: ivory;
}
</style>
  • Item.
  • Another Item.

Guess what? The box model also applies to lists – The <ul> itself is a box, and the <li> are boxes inside a box.

 

 

4) BOX MODEL ON TABLES

4-tables.html
<!-- (A) HTML TABLE -->
<table id="demoD">
  <tr>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>
 
<!-- (B) CSS -->
<style>
/* (B1) <TABLE> IS A BOX */
#demoD {
  padding: 20px;
  border: 3px solid red;
  margin: 10px;
  background: lightsalmon;
}

 /* (B2) <TR> IS A BOX WITH RESTRICTIONS */
#demoD tr {
  /* PADDING, BORDER, MARGIN HAS NO EFFECT */
  padding: 10px;
  border: 3px solid green;
  margin: 20px;
  /* BACKGROUND COLOR WILL BE INHERITED BY <TD> */
  background: ivory;
}

/* (B3) <TD> ARE ALSO BOXES */
#demoD td {
  padding: 10px;
  border: 1px solid magenta;
  /* MARGIN HAS NO EFFECT ON CELLS */
  /* WE USE "BORDER-SPACING" IN TABLE INSTEAD */
  margin: 20px;
}
</style>
Normal Cell Normal Cell
  • padding border margin will have no effect on the table sections and rows <thead> <tbody> <tfoot> <tr>.
  • margin will not work on the cells <th> <td>, we use cell-spacing on the table itself to space the cells out.

That’s all. I think this is getting old and you catch the drift by now – The box model is pretty much universal, even though it has restrictions on some elements.

 

5) BOX SIZING

5-box-sizing.html
<!-- (A) HTML -->
<div id="demoE"></div>
<div id="demoF"></div>
 
<!-- (B) CSS -->
<style>
/* (B1) SAME DIMENSIONS FOR DEMOE & DEMOF */
#demoE, #demoF {
  width: 100px; height: 50px;
  padding: 10px;
  border: 2px solid red;
  margin: 10px;
  background: cyan;
}
 
/* (B2) BOX SIZING */
#demoE { box-sizing: content-box; } /* DEFAULT */
#demoF { box-sizing: border-box; }

Some of you sharp code ninjas should have noticed this now – When we define width and height, does it mean the dimensions of the content only, or does it include the padding borders? Introducing box-sizing:

  • box-sizing: content-box The default if nothing is set. The width and height refer to the contents only.
  • box-sizing: border-box Will also take the padding and border into consideration.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

CSS Box Model (click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *