CSS Reference Info

The CSS Box Model

margin (sometimes called "gutter")

border

padding

This is the table contents

Argument Order

margin, padding

Up Right Down Left


linky-dinkys

Link Visited Hover Active


background

Color Url Attachment H-pos V-pos Repeat


 

Attachment: fixed, scroll


 

H Position: left, center, right (or px, %)


 

V Position: top, center, bottom (or px, %)


 

Repeat: repeat(default), no-repeat, repeat-x, repeat-y


colors

RR

GG

BB



 On this page:
 CSS code is slate red

 HTML code is slate blue

 Links to two excellent CSS and
 Javascript/Jquery reference
 books are at the bottom of the
 page.


Samples of Margin and Padding

Here are some samples of margin and padding. For each set:
- The thin black border shows the outline of the "containing" area
- The thicker blue border shows the outline of the "container"(in this case a "div") to which we are applying "margin" and/or "padding"

This shows a "div" with no margin or padding.The div is thus flush with its containing area. Also, the contents of the div are flush with its edges.
div.xxx {border:3px solid #000A97;}

This shows a "div" with 8 pixel margin. The div now has an 8 pixel separation from its containing area, but the div's contents are flush with its edges.
{... margin:8px;}

This shows a "div" with 8 pixel margin and padding. The div has the 8 pixel separation from its containing area, and its contents are inset by 8 pixels.
{... margin:8px; padding:8px;}

This is the div's contents. Here's another line. And here's another line. And one more line. And we finish with yet another line.

This is the div's contents. Here's another line. And here's another line. And one more line. And we finish with yet another line.

This is the div's contents. Here's another line. And here's another line. And one more line. And we finish with yet another line.

This shows how you can use the "U R D L argument order" shown above to position an item uniquely within its containing area. In this example, 25 pixels from top ("U"), 20 from the left ("L"). ("R" and "D" values not used in this case.)
{...margin:25px 0 0 20px;}
Alternate: {margin-top:25px; margin-left:20px;}

Padding has the same argument order. Here we are offsetting the div's contents 10 pixels from the top and 5 from the left. NOTE: you can also apply margin to the "paragraph" inside the div to do the same thing. (p.xxx {margin:10px 0 0 5px;})
{... padding:10px 0 0 5px;}
Alternate: {padding-top:10px; padding-left:5px;}

This shows a "div" with 8 pixel margin with "auto" L and R. This is used to center an element horizontally. The "0" for "D" is ignored. Note that "auto" won't work if you have "text-align:justify" for the paragraph. Note also that "auto" does NOT work for U and D. To center an element vertically (sometimes), use "display:table-cell" along with "vertical-align:middle".
{... margin:8px auto 0 auto;}

This is the div's contents.

This is the div's contents.

This is the
div's contents.

Observation about the above margin/padding samples

 You have probably had many experiences where you added some sort of positioning tweaks to containers or other elements and then hit "refresh", and then watched your elements move the other direction, or perhaps to see other objects move. The above six examples might reveal, at least partially, why this is.
 Judging from what is seen here, it would appear that browsers want to line up text going from left to right. Notice how the first line of the paragraph ("This is the div's contents") is lined up as you go from left to right. And in order to line up the text, sometimes the browser will apparently move the container instead!! This is normally not noticable, since there is usually not a border around containers like divs or table cells, but is revealed in the samples due to the light border that was added.
 The first set of three "margin and padding samples" above have been copied right below this text, but the containing divs have been styled as "table-cell", rather than be allowed to free float as in the above samples. This forces the div containers to be lined up. BUT, since the browser wants to align the top line of each paragraph, it has no choice but to ignore the assigned margin and padding in order to do this. Thus the tops of all the divs are lined up with the top of the rightmost one, and the bottoms of all the divs are lined aligned with the bottom of the leftmost div. (Had this been a "table", the table cells - "td" - would do the same thing.)

This is the div's contents. Here's another line. And here's another line. And one more line. And we finish with yet another line.

This is the div's contents. And this is another line of text.

This is the div's contents. And this is another line of text.


Browser Default Text Sizes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Link

Text and paragraph formatting

Text-align

left

center

right


{text-align:
left;}

Text-decoration

overline

underline

line-through

{text-decoration:
underline;}

Text-transform

Line with capitalize

Line with uppercase


{text-transform:
capitalize;}

This is a paragraph
of default line height
(110%-120%)

This is a paragraph
of 90% line height
Line of text



{line-height:90%;}
Alternate: {line-height:0.9em;}

This is a paragraph
of 200% line height
Line of text

{line-height:200%;}
Alternate: {line-height:2em;}

Text-indent

This is a paragraph with text indent of 1em (This is "body-text indent" in Word)

This is a paragraph with text intent of -1em (This is called "hanging" in Word)

{text-indent:1em;}
{text-indent:-1em;}

Letter, word spacing

This is a paragraph with letter-spacing 5px

This is a paragraph with word-spacing 10px

{letter-spacing:5px;}
{word-spacing:10px;}

":first-letter/:first-line" pseudo elements

The first letter has emphasis.

First line emphasis
The first line (separated by a "line break"), has emphasis.

{p.xxx:first-letter {color:red; font-size:xx-large;}
{p.xxx:first-line {color:red;}

Lists

List-style-type
li.li_xxx {list-style-type: square;}

  • default
  • circle
  • square
  • none
  • decimal
  • decimal-leading-zero
  • georgian
  • lower-alpha
  • lower-roman
  • lower_greek

List-style-position "inside"
ul.ul_xxx {list-style-position: inside;}

  • this
    next line
  • that
    next line
  • the-other
    next line
  • some more
    next line

List-style-position "outside" (default)
ul.ul_xxx {list-style-position: outside;}

  • this
    next line
  • that
    next line
  • the-other
    next line
  • some more
    next line

Borders (all 5 pixels)

Solid

Double

Groove

Inset

Outset

Ridge

Dashed

Dotted

Border + Outline

Double

Groove

Ridge

Forms

General syntax for forms:
<form name="NNN" method="post" action=""/>
 <input type="button" value="Click here" onclick="XXX( )"/>
</form>

Input: Button

<input type="button"
 value="Click here"
 onclick="XXX( )"/>

Input: Checkbox

check

cash

<p><input type="checkbox"
 name="cbox_1" value="1"/>
 check</p>

<p><input type="checkbox"
 name="cbox_2" value="2"/>
 cash</p>


NOTE: Placing the "input" inside
the "p" causes the text to be on
the right of the form

Input: Radio

Motorola

Uniden

Cobra

Midland

<p><input type="radio"
 name="rad_1" value="1"
 checked="checked"/>
 Motorola</p>

<p><input type="radio"
 name="rad_2" value="2"/>
 Uniden</p>
. . .

Select

<select name="sel_1">
 <option value="null">Select One</option>
 <option value="1">button</option>
 <option value="2">checkbox</option>
 <option value="3">radio</option>
 . . .
</select>

Select multiple

<select multiple="multiple"
name="sel_1" size="4">
<option value="1">button</option>
 . . .

Input: Password

Enter password

<input type="password"
 name="p_word" size="25"/>
 <p>Enter password</p>


NOTE: Placing the "p" after the "input"
causes the text to be below the form

Input: Text

Your name

<input type="text"
 name="f_name" size="25"/>
 <p>Your name</p>

Input: File

Enter file name

<p><input type="file" name="file_1"/>
 Enter file name</p>

Enter file name

<p>Enter file name<input type="file"
 name="file_2"/></p>

Enter file name

<input type="file" name="file_3"/>
<p>Enter file name</p>

Textarea rows="4"

Comments

<textarea name="tex_area"
 rows="4" cols="20">
 </textarea>
 <p>Enter file name</p>

Input: reset and submit

<input type="reset"
 value="Reset Me"/>


<input type="submit"
 value="Submit Me"/>

Here are the two excellent reference books from
which the author learned how do all these HTML
goodies, and for that matter, the entire Wrackline
Blog!


Javascript Book kindle book