Published on: 08 August, 2013

CSS Margin and Padding

Posted by andy | 1351 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

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.

CSS Margin and Padding

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;
}
Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 20 May, 2016
Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.
Published on: 31 January, 2016
The easy way to optimize your site for printing is to create a separated external css targeting a media to print only. When a printing action is being executed, the browser will send over the information from your page to the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.