CSS Margins are nearly identical to the CSS Padding attribute
except for one important difference: a margin defines the white space around an
HTML element's
border, while padding refers to the white space within the border. Setting the actual value of
margin is just the same as with padding, so you can probably zip right through this
section of CSS Tutorial.
Please see the example below for a visual representation. Note: A border has been added to each
element so you that you may see the effects of the margin attribute.
Or you could choose a more elegant compilation using Cascading Style Sheet:
You can set the margins in the same way on almost every element. For example,
we can choose to define margins for all of our text paragraphs marked with <p>:
Each
HTML element actually has four different margins: top, right,
bottom, and left. It is possible to define these individual margins
simply by adding a direction suffix to the margin attribute. Example form:
margin direction. Defining only one direction will leave the other 3
margins untouched.
This paragraph had one margin specified (left), using directional declaration.
Note that there is still a margin below and above this paragraph. This is because
our Cascading Style Sheet only replaced one of the four margins, which didn't effect the top
and bottom margins.
This header had each margin specified separately, using directional declaration.
Home 