Using Margin In CSS
If you like to make a margin for a container or DIV, we can use Margin in CSS to make this. You can use margin like this,

#content_left {
width:100px;
margin:0px;
}

This coding makes your DIV without an margin. If you replace 0 with some other value, it will make margin around the DIV(i.e it makes margin on top, left, right, and bottom)

If you like to make margin only on one side, then you need to put an “-” and specify the side. For eg. if you like to have margin only on left side of the DIV, then your code should be like this,

#content_left {
width:100px;
margin-left:10px;
}

This makes a margin of 10pixel only on left side. If you want margin only on right then use “margin-right:10px;”, in bottom then use “margin-bottom:10px;”, in top then use “margin-top:10px;”

Aligning DIV using Margin
If you want a DIV to be align to Center then margin can do this. Let’s say that you want to align a DIV ID with name content_center to the center, then your code can be like this,

#content_center {
width:1000px;
margin:0 auto;
}

Using Auto as value will make your DIV to be aligned to center. Using Auto will let CSS to decide the margin, such that your DIV is aligned to center.

Using Border
Border can be used to make a border for your DIV. eg. look at the content area in this website, you can notice that it is surrounded by a grey box. This is done by using Border attribute. If you like to have a box around your div then use border just like this,

#content {
width:1000px;
border:1px solid #FFF;
}

1px denotes the thickness of the border line,”Solid” denotes the type of line(i.e you can make a dotted line etc) solid makes a normal lines, just like the one you see in this website.

Like margin you can make border for one side. By using border-side
ie.
For Left border use border-left:1px;
For Top Border use border-top:1px;
For Right Border use border-right:1px;
For Bottom border use border-bottom:1px;

Using Padding
You can use padding to clear out some space around the DIV or container. Color of container or DIV will affect the padding.
The padding can also be specified for one particular side of the DIV. This can be done by specifying the side.

eg
#content {
width:1000px;
padding-top:10px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

From the above example you can understand that there will be a padding of 10 pixel on top, 2 pixel on bottom, 4 pixel on left and 4 pixel on right. Now Instead of using padding for four sides in four different lines it can be combined into one line of code. eg.

#content {
width:1000px;
padding:10px 4px 2px 4px;
}

Here padding:10px(is top) 4px(is right) 2px(bottom) 4px(left);
You can notice that it is a clockwise direction. Top – right – bottom – left

Result of both example will look alike, but the second one will safe time, and reduce your CSS file’s size, which will help you boost your page load speed.

If you are going to have equal padding for left & right and equal padding for top & bottom, then the code can be shortened further by using padding:10px 4px;

eg.
#content {
width:100px;
padding: 10px 4px;
}

Here Padding:10px(denotes top and bottom) 4px(denotes left and right)
So this coding is going to put 10px padding on top & bottom and 4px padding on left & right.

Using Float
A DIV or Container can be floated only on left and right. It can not be float vertically i.e top & down.

If you are floating an container to left, then the container is going to move to left side, it moves to extreme left. i.e it will move as far to the left or right. You can limited this have using wrap containers. i.e container(wrap) contains the another container(the floating DIV).

To float an element or container or DIV, eg,

#content {
width:100px;
float:left;
}

here float has only two possible values (left or right). Here in our example the DIV content is going to move to left of the page.

Avoiding Float
Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed. Clear can be used like this,

eg,
#content {
clear:both;
}

About the author

Priyangshu Borgohain wrote 308 articles on this blog.

Hey there, this is PrIyAnGsHu, the owner of Geeks4Share. I'm a 17 years old blogger and web entrepreneur from India who loves making money on the internet. When he is not engaged with his online business, you may find him playing games on his PS3 or listening remixed songs with full volume :P. You can join me on Google+.