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:
(Continued on next topic...)
- How Many Ways Can Elements Relate to Each Other?
- How In-line Elements Are Formatted Side by Side?
- How Nested Block Elements Are Formatted?
- How Two Block Elements Are Formatted as a Stack?
- How Floating Elements Are Formatted?
- Why Is the Top Margin Not Showing?
- How Are Vertical Margins between Two Block Elements Collapsed?
- How Are Parent Padding Spaces Collapsed with the Child Margins?
- How Is the Width of a Parent Element Related to Child Elements?
- How Is the Full Width of a Block Element Extended?
- How To Test Child Full Width Extension?
- How To Test Parent Content Width Extension?
- What Are White Spaces in HTML Documents?
- How White Spaces Are Formatted?
- What Happens to Multiple White Spaces in In-line Elements?
|