CSS Margin

The following CSS margin codes demonstrate the various CSS properties you can use to apply styles to the border of any HTML element.

Margins define the space around the element. CSS margins are specified in a similar way to borders - they can be set individually for each side, or all sides at once.

Setting Margins on all Sides

<div style="border:1px solid blue;">
<p style="border:1px solid orange;margin:20px;">

This text has a margin of 20 pixels on all four sides.
It is nested within a div with a border to make it easier to see the effect of the margin.
</p>
</div>

This results in:

This text has a margin of 20 pixels on all four sides. It is nested within a div with a border to make it easier to see the effect of the margin.

Setting Margins for Each Side

If you don't want the margin settings to be applied to all four sides, or if you want each side to have different margins applied, you can use the following properties:

• margin-bottom


• margin-left


• margin-right


• margin-top

Example:


<p style="border:1px solid orange;margin-left:60px;">This text has a left margin of 60 pixels.</p>


This results in:

This text has a left margin of 60 pixels.

Related Posts by Categories

Widget by Hoctro | Jack Book