CSS notes: Margins
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
Margins using CSS

One place to write code to adjust the margin of the page is in the CSS definition of the BODY tag

body {
    background-color: #333399;
    margin-top: 0 px;
    margin-left: 10 px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

Here are the CSS margin elements to help you adjust how things align to the edge of your page.

margin - use this to adjust all sides of the margin
margin-top
margin-right
margin-bottom

You can also use negative numbers:

body {
    background-color: #333399;
    margin-top: -2 px;
    margin-left: -2 px;
}

Margins using HTML

Here is the old HTML method of getting rid of margins on the top and left of elements on your page.

<body leftmargin="10" rightmargin="0" bottommargin="0" topmargin="10" marginheight="0" marginwidth="0">

Creating a Scrolling Text area
Here is a sample page using a scrolling text area:

<HTML>
<HEAD>
<TITLE>BGSU - ARTC 331 Notes</TITLE>
</HEAD>
<BODY>
       <TEXTAREA cols=30 rows=5 wrap=off">This is text inside a TEXTAREA element.
       You can write all kinds of things.
       This is text inside a TEXTAREA element.
       You can write all kinds of things.
       This is text inside a TEXTAREA element.
       You can write all kinds of things.
       This is text inside a TEXTAREA element.
       You can write all kinds of things.
       This is text inside a TEXTAREA element.
       You can write all kinds of things.</TEXTAREA>
</BODY>
</HTML>

You can use SOFT, HARD or OFF for the WRAP attribute.