In this chapter you will learn what is margin and padding. They are quite similar and sometimes may confuse to css beginners.

Padding is the space inside the actual content or cell of an object. While Margin is the outer space of that wrap the object. Yeah, it seems confusing and sounds no different, so to see the actual comparison, please see the following illustration image. The brown arrow represent the margin and while the blue arrow represent the padding of an object.

Margin and Padding Syntax

See how you can use the margin and padding properties in the following example:

/* This will apply 10px margin to the top, right, bottom and left space. */
.divbox{
    margin:10px;
}

/*This will apply 10px margin to the top, 20px to the right, 15px to the bottom and 5px to the left. */
.divbox{
    margin:10px 20px 15px 5px;
}

/*This will apply 10px margin to the top and bottom and 15px to the left and right.*/
.divbox{
    margin:10px 15px;
}

/* You can set individual margin-position like below: */
.divbox{
    margin-left:10px;
    margin-right:10px;
    margin-top:15px;
    margin-bottom:15px;
}

/* This will apply 20px padding to the top, right, bottom and left space. */
.divbox{
    padding:20px;
}

/* This will apply 10px padding to the top, 20px to the right, 15px to the bottom and 5px to the left. */
.divbox{
    padding:10px 20px 15px 5px;
}

/* This will apply 10px padding to the top and bottom and 15px to the left and right.*/
.divbox{
    padding:10px 15px;
}

/* You can set individual padding-position like below: */
.divbox{
    padding-left:10px;
    padding-right:10px;
    padding-top:15px;
    padding-bottom:15px;
}