Wednesday, November 21, 2012

CSS Margins and Padding

Margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.
The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.



Try out example:
Example of margin
CSS code
#container {
margin:0px auto; /*This is used to make container
apppear at the center of the computer screen*/
width:500px;
}
#box1 {
float:left;
margin-right:5px;
padding:5px;
width:235px;
}
#box2 {
float:right;
margin-left:5px;
padding:5px;
width:235px;
}

HTML code
<div id=”container”>
<div id=”box1″>
write some content over here
</div>
<div id=”box2″>
write some content over here
</div>
</div>

No comments:

Post a Comment