The Café Tutorial 7 & CSS line-height property

The blue document has 1.9em line-height which is visible in between the lines of the first and last paragraphs. Giving a line-height separates the text and makes it easier to read your document. line-height property allows the adjustment of vertical space between each line. It can be defined in pixels, ems or a percentage value which both use font-size as their base. If your font-size is 11 pixels, with a 1.9em line-height, multiply 11 with 1.9 and you are asking for 20.9 pixels of vertical space.

<style  type="text/css">
#homepage {
  margin: 40px;
  font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
  font-size: 11px;
  line-height: 1.9em;
}
</style>

To compare the differences, See before and after.

Café History:
After adding the 40 pixel margin. Before adding the 40 pixels, our document looked like this. Just to remind you what XHTML can do, we started out with text running into each other.