Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - Understanding Multiple Element Formatting Rules

By: FYICenter.com

Part:   1  2  3  4  5  6  7 

(Continued from previous part...)

What Are White Spaces in HTML Documents?

White spaces are combinations of continuous white space characters:

  • " " - The space character.
  • "\t " - The tab character.
  • "\n " - The new line character.
  • "\r " - The carriage return character.

How White Spaces Are Formatted?

White spaces are formatted depending where they are located:

  • White spaces will be ignored between block elements.
  • White spaces will be preserved in <PRE> tags.
  • White spaces will be collapsed into a single white space unit in a non-empty block element.
  • White spaces will be ignored in an empty block element.

The following tutorial exercise shows you some good white space examples in a HTML and CSS document:

<html><head>
<style type="text/css">
  DIV.page {width: 425px; border: 1px solid black}
  P {margin: 0px}
  PRE {margin: 0px}
  P#p1 {background-color: #ffdddd}
  P#p2 {background-color: #ddffdd}
  P#p3 {background-color: #ddddff}
  P#p4 {background-color: #ffffdd}
  P#p5 {background-color: #ddffff}
  PRE#p6 {background-color: #ffddff}
</style>
</head><body><div class="page">
<H3>Examples of White Spaces</H3>
<p id=p1>P1: Wh i   t e

sp a c es in a non-empty block.</p>
<p id=p2>P2: White spaces between this block
and the next block.</p>



   <p id=p3>P3: White spaces between this block
and the above block.</p>
<p id=p4>P4: The next block is an empty block 
with white spaces.</p>  
<p id=p5>

<strong></strong>

   </p>
<pre id=p6>P6: Wh i   t e

sp a c es in a preserved block.</pre>
<div></body></html>

Save this document as whiteSpaces.html, and view it with a browser, you will see something like this:
            White Space

What Happens to Multiple White Spaces in In-line Elements?

If there is a sequence of multiple white spaces and it is broken into pieces in different in-line elements, it will collapsed into the first white space on the left hand side, the first white space. The HTML tags will not stop collapsing multiple white spaces.

The following tutorial exercise shows you some good examples:

<html><head>
<style type="text/css">
  H1 {font-size: 20px}
  DIV.page {width: 350px; border: 1px solid black}
  TABLE#out {background-color: #ffdddd}
  TD#box {border: 1px solid black}
  SPAN#w {background-color: #ffffff;
    font-size: 24px; line-height: 36px}
  SPAN#b {background-color: #ddddff;
    font-size: 24px; line-height: 36px}
</style>
</head><body><div class="page">
<H1>White Spaces Collapsed to the Left</H1>
<table id=out><tr><td>
<span id=w>Welcome to</span><span id=b>FYIcenter!</span>
<br/>
<span id=w>Welcome to</span> <span id=b>FYIcenter!</span>
<br>
<span id=w>Welcome to </span><span id=b> FYIcenter!</span>
<br/>
<span id=w>Welcome to </span> <span id=b> FYIcenter!</span>
</td></tr></table>
<p align="right">By FYIcenter.com</p>
<div></body></html>

Save this document as inlineElementWhiteSpaces.html, and view it with a browser, you will see something like this:
            Inline Element White Spaces

Part:   1  2  3  4  5  6  7 


Selected Developer Jobs:

More...