CSS Margins
The margin property declares the margin between an HTML element and the elements around it. The margins are transparent - and cannot have a background color. The margin property can be set for the top, left, right and bottom of an element. p { margin-top: 50px; margin-bottom: 30px; margin-right: 10px; margin-left: 30px; }

All four margins are 25px

<p style="margin: 25px; border:1px solid black;"> All four margins are 25px </p>
div.container { border: 1px solid red; margin-left: 100px; } p.one { margin-left: inherit; }

This is a paragraph with an inherited left margin (from the div element).


CSS Padding
Padding is the distance between the border of an HTML element and the content within it. p { padding-top: 30px; } boxmodel The Box Model
Margins, padding and borders are part of the Box Model.
It works like this: in the middle you have the content area, surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent ---------------------------------------------------------------------------------------------------------------- Example: <style> b2 { width: 400px;height:30px; padding: 5px; border: 25px solid red; margin: 25px; background-color: lightblue; } </style> content ---------------------------------------------------------------------------------------------------------------- Example 2: <style> b3 { width: 800px; padding: 5px; border: 5px solid yellow; margin: 25px; background-color: lightgreen; } </style> more content here.................. ----------------------------------------------------------------------------------------------------------------

up