Collected by
Elizabeth Janson
Home Page

Margins are transparent

 

The margins are transparent space around your object, to keep it away from surrounding text and images.

definitions

The properties defined in this section refer to the <margin-width> value type, which may take one of the following values:
<length>
Specifies a fixed width using mm, px, em, pt, pc.
<percentage>
The percentage is calculated with respect to the width of the generated box's containing block. This is true for 'margin-top' and 'margin-bottom', except in the page context, where percentages refer to page box height.

The 'margin' property

is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' at the same place in the style sheet.
The properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side.

Example(s):

BODY { margin: 2em }     /* all margins set to 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } 
	/* top=1em, right=2em, bottom=3em, left=2em */

The last rule quoted above is equivalent to this example:

TABLE {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;   /* copied from opposite side (right) */
}

Remember, margin is outside the border, so affects the distances the blue border is from the red one, which is defined as
<TABLE BORDER 1 BORDERCOLOR=red cellspacing=0 cellpadding=0>

The following examples, using paragraphs with coloured backgrounds, attempt to explain the effects margins have on the surrounding code. 

<STYLE>
<!--
.even { margin: 5mm ;background:bisque;}         
      /* all margins set to 5mm */

.odd { margin: 1mm 20mm ;background:lightcyan; }    
      /* top & bottom = 1mm, right & left = 20mm */

.diff { margin:margin-top:1mm; margin-right:50mm; 
      margin-bottom:5mm; margin-left:2mm; 
      background:palegreen; } 
      /* top=1em, right=50mm, bottom=5mm, left=2mm */
-->
</STYLE>

all margins set to 5mm 'margin: 5mm ;background:bisque;' The margins are transparent space around your object, to keep it away from surrounding text and images.

P STYLE=" margin-bottom:0px; margin-top:0px; for Text above our list

top & bottom = 1mm, right & left = 20mm 'margin: 1mm 20mm ;background:paleblue;' The margins are transparent space around your object, to keep it away from surrounding text and images.

P STYLE=" margin-bottom:0px; margin-top:0px; for Text below our list

margin: margin-top:1mm; margin-right:50mm; margin-bottom:5mm; margin-left:2mm;background:palegreen;

This last example makes it clear that there is other padding associated with the <HR>, as also described in Padded Lists, and that solution using <P> helps here, too.

Borders and Padding
Padding inserts space between the contents and the border. I will reuse the examples.

P STYLE=" margin-bottom:0px; margin-top:0px; for Text above our list

'padding:5; border-width:thick; border-color:red blue black green; border-style: solid; margin: 5mm ;background:bisque;' The margins are transparent space around your object, to keep it away from surrounding text and images.

P STYLE=" margin-bottom:0px; margin-top:0px; for Text above our list

padding:5 20 20 20; border: thin solid black; margin: 1mm 20mm ;background:lightcyan;' The margins are transparent space around your object, to keep it away from surrounding text and images.

P STYLE=" margin-bottom:0px; margin-top:0px; for Text above our list

border: thin solid green; padding-top:5; padding-right:50; padding-bottom:20; padding-left:20; margin: margin-top:1mm; margin-right:50mm; margin-bottom:5mm; margin-left:2mm;background:honeydew;

The margin is outside the border. Both margin and padding have a background colour of transparent.

Email
CSS begins here
Back to Fonts, or on to container box shorthand.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.