Margins are a pretty simple concept. When you want to add space around an element, then you will style a property’s margin. This is important, because you can do a lot with margins.

You can style the margin of any element on your page. There are also different methods to styling your margins. The first way is to style each side independently. This will allow you to specify how much margin is on each side. Here is an example below:


#banner{
margin-top: 15px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 20px;
}

This example says that there will 15px space on top, 5px on the right, 10px of space on the bottom, and 20px of space on the left. This is excellent, and gives you a lot of control when giving an area margins for spacing.

Another method is used for when the top and bottom margins are the same, and the left and right margins are the same. See the example below:


#banner{
margin: 10px 5px;
}

This styling shortens the process and says that there are 10px of margin on the top and bottom, and there are 5px of margin spacing on the left and right sides. You can use either of these methods when styling your elements, and they will work the same.

The final method is used mainly for container divs, such as those used for the main content area of a website. Many designers use container divs to enclose their headers, menus, sidebars, content areas, and footers, so that everything lines up easily, and so that they can use the following CSS to align the entire website to the center of the browser automatically:


#container{
margin: 10px auto;
}

This is really simple, but you can use this on the main container div of your website to align the entire site to the center automatically. The 1st digit can be whatever you specify, as it stands for the top and bottom margins of your site. They can even be set to 0px if you want. The second declaration, auto, tell the left and right margins to automatically adjust equally apart from each other, giving you a naturally centered website in the browser.