Click here to Skip to main content
15,867,756 members
Articles / Web Development / HTML

CSS Basics: The Box Model, Margin, and Padding

Rate me:
Please Sign up or sign in to vote.
4.81/5 (10 votes)
18 Jul 2011CPOL6 min read 65.4K   29   2
The CSS box model defines the border and spacing around an HTML element. We'll take a closer look at how it works.

Introduction

One of the powerful features of modern HTML and Cascading Style Sheets (CSS) for web development is that you can almost completely separate the markup of your page in HTML from the rendering details specified in your CSS. An HTML page using a small selection of tags and some CSS styling can look like… well, just about anything you like. And you can change how it looks by simply changing the CSS.

A basic - but often misunderstood - feature of CSS styling is something called the box model. The box model simply defines the rectangular space around an element and is defined by three properties:

  • border
  • padding
  • margin

The widths you assign to these CSS properties add up to the space between the associated HTML element and its neighboring elements. Here’s an example showing all three:

A simple box model example.

The border represents the effective outer limit of the element itself. The border can be either visible or invisible, and has properties for line type, color, and width.

Padding specifies the spacing between the border and any content within the HTML element. If there’s no visible border, then the extent of the padding is effectively the extent of the element. Any background CSS properties associated with the element are displayed within the area defined by the border and padding properties.

The margin represents the distance between the outer edge of the border and any neighboring elements. This is often a source of confusion as it’s easy to think of the margin as a kind of “padding” between elements. Better to think of it like the margin of a page: it represents the outer edge of the object. The margin is effectively transparent and will not reflect any of the background properties specified for the element.

CSS Syntax

Let’s construct a simple example so you can see the CSS syntax. Here’s the HTML for a simple container div containing a single line of text:

HTML
<div id="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

For visual clarity, we first set up the styling of the body and the “container” div:

CSS
body {background: black;}
#container {
    background: gray; 
    width: 600px; 
    margin: 0px auto; 
    border: 1px solid black;}

The important thing to note here is that the page background is black and the container div is gray. Now we can format the p element within the container:

CSS
p { background: white;
    border: 20px solid red; 
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px; }

So anything within the border of the p element should be white - and we’ll have a good, thick, red border so you can’t miss it. Here’s what it looks like:

The box model elements annotated.

Note that we specify the top, bottom, left, and right margin and padding values separately in this example. This is one way to specify these values, and similar border-top (and so on) settings are available for the border. This allows you to clearly set any or all border, margin, and padding settings that you need. For example, this is completely acceptable if you only want to specify the top and right margins:

CSS
margin-top: 30px;
margin-right: 8px;

However, you can also use CSS shorthand syntax to set these values. This is, in fact, what we’ve done with the border setting so far:

CSS
border: 20px solid red;

For the margin and padding, you can set all four values at once using this shorthand:

CSS
margin: 0 0 0 0; 
padding: 0 0 0 0;

The values are given separated by spaces in clockwise order from the top. In other words:

margin: [top] [right] [bottom] [left]

You have to give all four values, using 0 to indicate no margin or padding in that direction. Any legal CSS unit can be used, though these properties are typically set in %, px, or em values.

Neighboring and Nested Elements

Configuration of the border, margins, and padding for elements in the page markup gives you great flexibility in the design of your site. As with other CSS properties, you can assign styles to elements, element states (hover, for example), IDs, and classes. And a little scripting with JavaScript or jQuery enables you to do some pretty fancy styling on the fly as well.

You need to be aware of combined margin and padding effects of adjacent elements. It’s not always obvious how settings will combine - particularly when style changes affect the placement of elements on the rendered page. And there are some tricks you need to be aware of as well.

First, let’s take a look at a variety of different border, margin, and padding configurations here:

Neighboring divs with various borders, margins and padding.

The HTML for this code is pretty straightforward and is just an extension of the previous examples. Each line of text is contained in a separate div, and each div has a unique ID.

XML
<div id="container">
    <div id="none">Lorem ipsum dolor sit amet....</div>
    <div id="margin">Ut enim ad minim veniam....</div>
    <div id="padding">Duis aute irure dolor....</div>
    ...
</div>

Here’s the associated CSS:

CSS
#none {
    border: 1px solid red; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0;}
#margin {
    border: 1px solid red; 
    margin: 20px 20px 20px 20px; 
    padding: 0 0 0 0;}
#padding {
    border: none; 
    margin: 0 0 0 0; 
    padding: 20px 20px 20px 20px;}
#marginpadding {
    border: none; 
    margin: 20px 20px 20px 20px;
    padding: 20px 20px 20px 20px;}
#marginborderpadding {
    border: 20px solid red; 
    margin: 20px 20px 20px 20px; 
    padding: 20px 20px 20px 20px;}

Note that the margin and padding are additive, and you’ll need to keep that in mind. 5px here and 10px there can add up to some unexpected placement of elements.

However, there are some exceptions, the most important of which is…

Collapsing Margins

In many cases, when two adjacent elements both have top or bottom margins that touch, the margins combine regardless of your CSS properties for the individual elements. This is called a collapsed margin. Here’s an example:

An example of collapsing margins on adjacent elements.

The four divs here are all using the same 20px margins and padding all the way around.

CSS
#marginpadding {
    margin: 20px 20px 20px 20px; 
    padding: 20px 20px 20px 20px;}

But notice that, while there’s equal padding all the way around each element, the top and bottom margins between elements are clearly less than 20px + 20px = 40px. In this case, it turns out to be OK, and we get appropriate margins all the way around. But it pays to be aware that this behavior is by design. In addition, empty elements will typically collapse completely regardless of margin values, and there are other rules as well. To learn more, read the Collapsing margins section of the W3C CSS Recommendation, which goes into great detail about how and when margins collapse.

Another collapsing margin case is a bit more tricky. Remember that, in the original HTML example, the container has a border. If we take that away…

CSS
#container {background: gray; width: 600px; margin: 0px auto;}

…presto, the top and bottom margins collapse completely.

Collapsing top and bottom margins.

A straightforward remedy is what we had in the first place: a small border that blends in with the background or using the transparent color value. However, in more complicated layouts, you may end up resorting to using dummy elements that negate the collapsing behavior. A close reading of the CSS Recommendation should help you avoid these situations, however.

Negative Margins

So far all of the examples have shown zero or positive margin values. With the CSS2 specification, negative margin values are perfectly legal CSS, too. In a nutshell, negative top and left values let you pull the element up and over, while negative bottom and right values pull adjacent elements into and over the target element. Combine negative margins with z-index and you can create some pretty slick layouts with just a few lines of code.

For example, this CSS turns our previous linear example into a collection of overlapping boxes:

CSS
#marginpadding {
    margin: 20px 40px 20px 20px; 
    padding: 20px 20px 20px 20px; 
    z-index: 1; 
    position: relative;}
#negativemargin {
    background: orange; 
    margin: -30px 20px -30px 40px; 
    padding: 20px 20px 20px 20px; 
    z-index: 2; 
    position: relative;}

Here’s what it looks like:

Negative margins enable overlapping elements.

There are a lot of great effects you can achieve with negative margins, including multi-column lists, textual drop shadows… the list goes on.

By now you should have a pretty good handle on the box model. Put this together with some knowledge of CSS positioning - see Fluid, multi-column, vertically ordered list using CSS and Relatively Simple 3 Equal-Height Columns CSS Liquid Layout - and you can do quite a bit with not a lot of code.

Happy coding!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Writer ContentLab
United States United States
Terrence Dorsey is a technical writer, editor and content strategist specializing in technology and software development. He is currently Senior Technical Editor at ContentLab. He previously was Senior Technical Writer at ESPN, Director of Content Development at CodeProject and Senior Editor of MSDN Magazine and TechNet Magazine. His writing has appeared in Visual Studio Magazine, MSDN Magazine, Application Development Trends and Redmond Magazine.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun3-Feb-14 22:29
Humayun Kabir Mamun3-Feb-14 22:29 
GeneralMy vote of 5 Pin
Gun Gun Febrianza29-May-13 4:16
Gun Gun Febrianza29-May-13 4:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.