css/e11space.php

<html>
 <head>
  <title> <?php echo basename(__file__, '.php'); ?> </title>
  <style type="text/css">
    #s2 { line-height: 2em; letter-spacing: 0.3em; word-spacing: 2em }
    #vT { vertical-align: text-top }
    #vB { vertical-align: baseline }
    #i5 { background-color: yellow; text-indent: 4em; }
    #i5:first-line {  font-weight: bold; }
    #i5:hover { background-color: green }
    #bG { background-colorvertical-align: baseline }
  </style>
 </head>
 <body>
<ol>
<h1>spacing</h1>
<ol>
<li> Einheit em = so breit wie ein <b>m</b>: ist meist sinnvoll </li>
<li id="s2"> #s2 { line-height: 2em; letter-spacing: 0.5em; word-spacing: 3em } ziemlich sinnlos, aber wenigsten sollte man etwas sehen, oder nicht? </li>
<li>ganze ohne spezial formattierung ................ </li>
einem imag #vT { vertical-align: text-top } <img id="vT" src="i01green.jpg">, aber mit #vB { vertical-align: baseline } <img id="vB" src="i01green.jpg"> </li>
<li>ganze ohne spezial formattierung ................ </li>
<li id="i5"> mit         #i5 { background-color: yellow; text-indent: 4em; }
    #i5:first-line {  font-weight: bold; }
    #i5:hover { background-color: green }  und so weiter und so fort und so weiter und so fort und so weiter und so fort</li>
</ol>
und ohne liste
<p id=i5> und i5 im p    #i5 { background-color: yellow; text-indent: 4em; }
    #i5:first-line {  font-weight: bold; }
    #i5:hover { background-color: green } und so weiter und so fort und so weiter und so fort und so weiter und so fort
    </p>

 <h1>Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
 </body>
</html>