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

CSS Tutorials - How White Spaces Are Formatted

By: FYICenter.com

(Continued from previous topic...)

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

(Continued on next topic...)

  1. How Many Ways Can Elements Relate to Each Other?
  2. How In-line Elements Are Formatted Side by Side?
  3. How Nested Block Elements Are Formatted?
  4. How Two Block Elements Are Formatted as a Stack?
  5. How Floating Elements Are Formatted?
  6. Why Is the Top Margin Not Showing?
  7. How Are Vertical Margins between Two Block Elements Collapsed?
  8. How Are Parent Padding Spaces Collapsed with the Child Margins?
  9. How Is the Width of a Parent Element Related to Child Elements?
  10. How Is the Full Width of a Block Element Extended?
  11. How To Test Child Full Width Extension?
  12. How To Test Parent Content Width Extension?
  13. What Are White Spaces in HTML Documents?
  14. How White Spaces Are Formatted?
  15. What Happens to Multiple White Spaces in In-line Elements?

Selected Developer Jobs:

More...