Web Programming Samples and References

Cascading Style Sheets
(CSS2)

The CSS Box

Border, Padding, and Margin

General Examples

General format of margin, padding, and border:

(All examples, unless otherwise noted, are contained within a white box with shaded sides)

• Individual width/style/colors for top, right, bottom, and left (in that order) may be set
  (e.g., margin: 0em 2em 1em 2em ).
• These may be individually set, as in "border-top", "border-right", "border-bottom", "border-left".
• The order is
  • If one spcifications is given, the order is top/bottom/right/left
    (e.g., margin: 0em )
  • If two spcifications are given, the order is top/bottom right/left
    (e.g., margin: 0em 2em )
  • If three spcifications are given, the order is top right/left bottom
    (e.g., margin: 0em 2em 1em )
  • If four spcifications are given, the order is top right bottom left
    (e.g., margin: 0em 2em 1em 2em )

Specific Usage Examples

Margin Alone:

Padding Alone:

Border Alone:

Margin Top/Bottom & Right/Left:

Margin Top/Right/Bottom/Left (Example One):

Margin Top/Right/Bottom/Left (Example Two):

Margin & Padding:

Padding & Border:

Margin & Border:

Margin, Padding, & Border:

Additional Border Examples

From the World Wide Web Consortium:

The <border-style> value type, which may take one of the following values:

none

No border; the computed border width is zero.

hidden

Same as 'none', except in terms of border conflict resolution for table elements.

dotted

The border is a series of dots.

dashed

The border is a series of short line segments.

solid

The border is a single line segment.

double

The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.

groove

The border looks as though it were carved into the canvas.

ridge

The opposite of 'groove': the border looks as though it were coming out of the canvas.

inset

The border makes the box look as though it were embedded in the canvas.

outset

The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.

Playing with these we get the following (all are padded-out 5pt to make them a bit more readable with a 1-em margin below):

Table Example

(1) Effect of Margins in Tables

The following style is used:

  .margin {
    color: red ;
    margin-top: 2em ;
    margin-right: 3em ;
    margin-bottom: 2em ;
    margin-left: 3em ; }

Note that assigning the class to the <td> element has no effect, but assigning the class within the <td> element via (in this example) a <div> element produces the anticipated effect.

(2) Effect of Padding in Tables

The following style is used:

    .padding {
      color: red ;
      padding-top: 2em ;
      padding-right: 3em ;
      padding-bottom: 2em ;
      padding-left: 3em ; }

Note that assigning the class to the <td> element or within the <td> element via (in this example) a <div> element both produce the anticipated effect (although note the slight differences in the rows if the browser window's width is slightly adjusted).

(3) Effect of Borders in Tables

The following style is used:

  .border {
    color: red ;
    border-color: #ccffff ;
    border-width: 2em ;
    border-style: double }

Note that assigning the class to the <td> element or within the <td> element via (in this example) a <div> element both produce the anticipated effect.

Horizontal Rule Control

The traditional way of controlling the position, shading, and size of horizontal rules has been to do something like this:

<hr align="left" width="5" size="5px" noshade="noshade" />

Which would produce this:

In the strict modes of html 4.1 and xhtml 1.0 and in xhtml 1.1, none of those attributes exist, so all control of the horizontal rule must be accomplished by use of CSS. This is not altogether intutive, but once the techniques are identified it is farily easy. For the above example, the following code was used:

<div style="
    margin-top: 1em ;
    margin-left: 0 ;
    margin-right:75% ; 
    background: #808080 ; 
    color: #808080 ;
    border-top: solid 5px "></div>

The horizontal rule may be created by either a <div> element or a <hr /> element, so this also works:

<hr style="
    margin-top:1em ;
    margin-left:0 ;
    margin-right:75% ; 
    background: #808080 ;
    color: #808080 ;
    border: 1px solid ;
    height:5px " />

In the above examples, there are some duplication of controls to account for differences in how Netscape/Mozilla and Internet Explorer draw the line.

The prevailing philosophy at W3C is to move away from using specialized markup to draw the page but instead use the containing elements of the content to format the rendering. Thus, instead of of the following code fragment . . .

<hr />
<p>Some irrelevant confabulations here.</p>

which would be rendered thus:

the following would be recommended:

<p  style="
    margin : 0.5em 0 1em ;      /* space the paragraph with respect to page and surrounding content */ 

    border-top-color : #cccccc ; 
    border-top-style : groove ; /* format horizontal rule */ 
    border-top-width : 3px ;  

    padding-top : 1em           /* position paragraph content with repect to horizontal rule */ 
    ">
Some other irrelevant confabulation here.</p>

which would be rendered thus:

That notwithstanding, legacy pages are full of <hr /> elements, and it may be easier for developers to modify them to conform to html/xhtml strict standards than to replace them outright. That stated, here are some more examples using the <hr... format:

Example One

<hr 
  style=" 
    height: 3px;
    border-color: #888; 
    border-style :inset ; 
    border-width: 1px " />

This is pretty much the default <hr />, which simply entered as <hr /> looks like this:

Example Two

With adjustment of the margins it may be moved across the page, with more control than simply left/center/right:

Example Two: A

<hr
  style="
    margin: 0px 2% " /> 

Example Two: B

<hr 
  style=" 
    margin: 0px 25% " />

Example Two: C

<hr 
  style=" 
    margin: 0px 25em 0px 10% " />

Example Two: D

<hr 
  style=" 
    margin: 0px 10% 0px 55% " /> 

Example Three

A thin, unshaded line:

<hr style=" 
    margin: 0 auto 0 ; width: 100% ; height: 1px ;
    color : #333333 ; 
    shade : noshade ; 
    background-color : #ffffcc ;
    border-top    : 1px solid ;
    border-bottom : 1px solid  " />

Example Four

A thicker, unshaded line:

<hr 
  style="
    color: #666;
    background-color: #666;
    height: 3px;
    border: none " />

Example Five

A few additional examples:

<hr 
  style="
    color : #fff ; 
    height: 5px ; 
    border: 2px inset #000 " />

<hr 
  style="
    margin: 0 auto 0 ; 
    width: 30% ; 
    height: 3px " />

<hr 
  style="
    margin: 0 auto 0;
    width: 10% ; 
    height: 3px ;
    background    : gray   ;
    border-top    : gray  1px solid ;
    border-bottom : gray  1px solid " />

Notes

1. Use padding instead of <blockquote> or tables for formatting. For example,
   <span class="padding">
   -- OR --
2. Use margin instead of <blockquote> or tables for formatting. For example,
   <span class="margin">

   ---

   (unless, of course, it really is a blocked-quote)
   For the two above examples, the following style was used:

     <style type="text/css">
       .margin {
         color: red ;
         margin-top: 2em ;
         margin-right: 3em ;
         margin-bottom: 2em ;
         margin-left: 3em ; }
       .padding {
         color: red ;
         padding-top: 2em ;
         padding-right: 3em ;
         padding-bottom: 2em ;
         padding-left: 3em ; }
     </style>
   

3. Simple indent of the first line of a paragraph is accomplished with "text-indent".

4. The background style of the various areas of a box are determined as follows:

   • Content area: The 'background' property of the generating element.
   • Padding area: The 'background' property of the generating element.
   • Border area: The border properties of the generating element.
   • Margin area: Margins are always transparent.

   Thus,

     <style type="text/css">
       body {
         background-color: white }
       td {
         background-color: #ffffff }
     </style>
   

   produces backgrounds of white in general, but yellow in table data cells (     ) .

5. Padding may have a background color, unlike Margin, which is transparent:
   here it is
   (Note: the above is aligned under the "P" in "Padding" as part of the indent for the <li> elements.)
   
   The style for the above is as follows:

   <style type="text/css">
     .padding_background_demo {
       font-weight: bold ; 
       font-size: 20px ; 
       color: blue ; 
       background: #ccffcc ; 
       padding: 1em 5em }
   </style>
   

   Notes:
   • The color of the padding area is set with the background property of the element having the padding.
   • The "em" unit, an "m", is a relative measure, relative to the element's font size: "1em" is equal to the size of the font in use.
   • The "px" unit, pixels, is a relative measure, relative to the viewing device.

References:

Contact DocSteve

Copyright © 2004 - 2010
Steve Sconfienza, Ph.D.
All Rights Reserved