Preserving space within elements and removing blank space (empty rows) between elements XSLT, CSS

Question

Been trying to transform an xml document, using output html method, for display in browser using xsl stylesheet (with CSS). Would like to display the following code

 <paragraph> 
 <content>Source                   A</content>
 </paragraph>
 <paragraph>
 <content>Color                       Yellow   </content>
 </paragraph>

as

Source                   A

Color                       Yellow

with space preserved between "Source" and "A", and space preserved between "Color" and "Yellow", but space (blank rows) removed between the rows. I am able to do either, for example wrapping the content nodes with pre nodes preserves space within the elements, and using

  <p>
  { margin:0}

removes the blank space between the rows. However I haven't been able to accomplish both concomitantly. Played with various options such as whitespace:pre, xsl:preserve-space, and many other combinations without success. Thanks

Answer 1

XSLT preserves whitespace. HTML just by default does not show it.

Use this CSS directive:

p { 
  white-space: pre;
}

and XSLT like this:

<xsl:template match="paragraph">
  <p><xsl:value-of select="content" /></p>
</xsl:template>