CSS Basics: The Box Model

If you’ve been using CSS for a while, then this post will probably teach you nothing new. I just wanted to state the obvious even if I’m the only one who benefits from it.

While I was (re-)learning CSS, I came across these two properties called margin and padding. At first, they seem to be doing the same thing namely providing space between HTML elements. But although they seem to fulfill the same purpose, there’s a clear distinction between the two.

image 

The margin is intended for providing space between outside HTML elements or the sides of the page. Padding is used for providing visual space between the content and the border of the box.

Some margin, no padding
Some padding, no margin

 

The first example provides a margin to add visual space between the border and the parent element. The second one provides space between the border and the content.

I agree that this is trivial, but it matters to understand the difference between these two properties when using CSS.

Published by

Jan Van Ryswyck

Hi, thank you for visiting my blog and reading all the crap that I'm posting here. I'm a senior software engineer at SD WORX. Developing software is one of my greatest passions in life, and I enjoy doing it every single day. I've got three kids (Len, Lisa & Laura) who constantly remind me that there is more in life than just programming all day. They are the greatest kids in the whole world. And last but not least, there's my girlfriend who is my inspiration in life. You can always contact me at jan_dot_van_dot_ryswyck at gmail.com

4 thoughts on “CSS Basics: The Box Model”

Comments are closed.