Margin
Using these specific properties, each edge can have a different margin value applied. In this example we will style 2 boxes using separate values for each edge.
CSS:
#box1 { width:100px; height:100px; background-color:red; margin-bottom:100px; } #box2 { width:100px; height:100px; background-color:gray; margin-left:250px; } HTML: <body> <div id="box1">box1</div> <div id="box2'>box2 </div> </body> |
box1
box2
|
We can write individual margin declarations, and if you only need to declare one side margin this is perfect. However, if you need to declare margin value for all sides, we prefer to use the short hand version. The code below is an example.
margin: top value, right value, bottom value, left value;
If you have trouble remembering the margin shorthand values, think of a clock. Start at 12 o'clock (top), 3 o'clock (right), 6 o'clock (bottom), and 9 o'clock (left). Going clockwise, this may help you as you learn to write these values.
margin: top value, right value, bottom value, left value;
If you have trouble remembering the margin shorthand values, think of a clock. Start at 12 o'clock (top), 3 o'clock (right), 6 o'clock (bottom), and 9 o'clock (left). Going clockwise, this may help you as you learn to write these values.
CSS:
#box1 { width:100px; height:100px; background-color:red; margin:10px 10px 100px 10px; } #box2 { width:100px; height:100px; background-color:gray; margin-left: 0px 250px; } HTML: <body> <div id="box1">box1</div> <div id="box2">box2 </div> </body> |
box1
box2
|
Padding
Padding is internal space of an element.