web blazonry web development scripts and tutorials Get best price on Samsung Galaxy Note 4, Frosted White 32GB (Verizon Wireless)
   PHP       Name Generators       Perl       CSS       Javascript       Java       MySql       How Tos       Resources   

CSS Home



CSS Tutorial
  Introduction
  Getting Started
  The Basics
  Margins
  Fonts and Text
  Backgrounds
  Miscellaneous
  Tips and Tricks
  Problems & Compatibility
  Examples
  CSS Reference Guide

Bookmark and Share




The next pages cover specific attributes you can change using style sheets. These are margins, fonts and text, and backgrounds.

CSS Tutorial: Margins

Style sheets allow you to specify margins. What a nice addition to web pages. No longer will text be shoved right up against the sides of the browser, and no more extraneous tables to work around this. Well maybe not all table workarounds will disapper, but they can be much simpler.

With margins you can format the text within tables or any HTML element. Also you can indent single lines, whole paragraphs, image spacing, and more.

There are 5 margin properties, well really 4 and 1 shorthand. These properties are:

margin-top

margin-bottom

margin-right

margin-left

margin (shorthand)

The values they accept are lengths, or percentages. The lengths are measured in pixels(px), inches(in), centimeters(cm), millimeters(mm), font point (pt), font height (em), and picas (pc).

The percentages are relative to the object, which could be the whole page, or 'inside' of another object, like a table. Negative values are accepted, but be careful when using them.

Examples


P { margin-top: 10px; margin-bottom: 75px;
margin-left: 50px; margin-right: 25px; }

This will define the above margins for everything in paragraph tags. click here for an example Play with resizing your browser window, notice the margins stay the same width.

The margin shorthand notation could have been used in the above and would have looked like this:

P { margin: 10px 25px 75px 50px }
The shorthand order being top - right - bottom - left.

Some even nicer short cuts, if using similar values, can be used. To set a 0.5in margin on each side you could use:

P { margin: 0.5in }

If you have the same top and bottom margins, and the same right and left margins you can use the following shorthand notation:

P { margin: 0.5in 1.0in }
This would create a half inch margin top and bottom, and a full inch margin on the left and right.

Here is an example to indent text

.indent1 { margin-left: 5%; margin-right: 30%; }

.indent2 { margin-left: 30%; margin-right: 5%; }

Click here for this example This example shows shifting paragraphs around using margins, this probably could be a quote or image in the now empty blank spots.

Next >>


 

Newest Pages
Test Google Ads Ver. 2
Free Linux Admin Books
Free Linux Books for Programmers
Free Books for Linux on the Desktop
Free PHP Books
Free JavaScript Books
Free Java Books - Advanced
Free Java Books - Basic
Free Perl Books
Free Python Books
Quote of the Day (PHP)
Debugging Part 2
How to Test Google Ads
Most Popular Pages
Baby Name Generator
U.S. Name Generator
Wu Name Generator
Popup Windows (JavaScript)
Upload and Resize an Image (PHP)
How To Install Apache + PHP + MySQL
Intro to Web Databases (PHP, MySQL)

Least Popular Pages
iNews Applet (Java)
Java Resources
Site Monitor (Perl)
PHP Resources
 
 

  privacy policy     ||     © 1997-2016. astonishinc.com   All Rights Reserved.