The CSS box model: margin, border and padding

All HTML elements can be considered ‘boxes’, i.e. rectangle areas that have some content in them. Also, still with the box analogy: boxes typically can be nested or  contained entirely within one another.

The way distances related to these boxes are calculated, and the terminology for each of these is called the ‘box model’. In the box, we have the content at the center, and then going outwards we have the padding, border and margin.

An image explains it best:

Screen Shot 2014-01-19 at 23.18.38

So, here is what we have:

  • Margin is space kept outside the box, separating it from other elements in the page.
  • Padding is the space kept inside the box, separating the content from the edge.
  • Border is, well, how fat or thin (or non-existing) the border around the box is.

Each of padding, border and margin can be specified using CSS rules. They are most often specified in pixel, or px.

Specifying box measures for all directions or just for one

If you want some more space around an element, you give it more margin, like this:

margin:5px;

However, what if you want just some more space on the left of the element? Or just above or below it? To do this, you can specify the margin just for the top, right, bottom or left. So, for some more space below an element we would add bottom margin like this:

margin-bottom:5px;

The same goes for padding. So for example, to specify to leave some space between an elements top and bottom edges and the content within it, you would specify like this:

padding-top:5px;
padding-bottom:10px;

Margin and padding in action

Feel free to open up your text editor and follow along!

Let’s start with 2 div elements, and give them each a border and a different background color:

<div class="mybox">This is some text</div>
 <div class="mybox">This is some other text</div>
 <style>
.mybox {
background-color:yellow;
border:4px solid black;
}
 </style>

Here is how that looks in a browser:

Screen Shot 2014-01-19 at 23.51.05

The boxes are stuck together, so let’s add a little space around each box. Add a margin rule to the CSS, so it becomes this:

<div class="mybox">This is some text</div>
 <div class="mybox">This is some other text</div>
 <style>
.mybox {
background-color:yellow;
border:4px solid black;
margin-bottom:5px;
}
 </style>

This gives some nice space between our boxes:

Screen Shot 2014-01-19 at 23.50.43

Finally, that text in there looks rather ‘cramped’, i.e. too close to the edges. It’s good practice to give elements some ‘breathing space’ by adding padding to them. So let’s have one last change to do that, like this:

<div class="mybox">This is some text</div>
 <div class="mybox">This is some other text</div>
 <style>
.mybox {
background-color:yellow;
border:4px solid black;
margin-bottom:5px;
padding:10px;
}
 </style>

… And here’s how that looks:

Screen Shot 2014-01-19 at 23.50.28

… And that’s it! A lot more ‘breathing room’ for our content now, which is what is important in any well-designed web page!

Conclusions

You want to really, really internalize the concepts of the ‘box model’ because they are super duper important in web design.

  • Margin – space at the outside of an element
  • Padding – space at the inside of an element
Advertisements

2 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s