For a single element, maintaining these spaces requires a simple option added to the property of the element.

For example, to maintain white spaces for a paragraph (in the source tab, it should be only <p></p> tags with content inside):

• Click on the paragraph. You should see in the “breadcrumbs” (top left) something like: ‘p > ~contents’.
• In the Attributes tab, under Other, tick the Whitespace checkbox.
• When you type, inside the paragraph, the text will wrap on the next line when it reaches the right edge of the page.
• If the Whitespace checkbox is not checked, the text will never wrap and it will continue outside of the page.

For more information about the Whitespace property and its options, see white-space on Mozilla Developer Network.

To affect multiple elements of various types (divs, paragraphs, cells, etc), you can use a class that is applied on these elements. Only the elements with this class will be affected.

First, create the class:

• Go to Edit, then Stylesheets…
• Click Add (+) to add a new CSS rule
• Change the Selector box to name the class. For example, .keepspaces
• In the Type tab, Spacing group, change the whitespace option to pre.

To affect any element with this CSS rule, simply add the keepspaces class in its attributes. If an existing class is present, you can still add it, just make sure there’s a space between each class. For example, highlighted green keepspaces indicates 3 different classes and will apply styles for all of the appropriate CSS rules.

You can affect all elements of a specific type in your template (for example, all paragraphs, or all divs) by creating a rule as above. However, instead of using a class selector (.keepspaces), you can simply use an element type selector, such as p, td, div, h3, etc. Element type selectors are simply the element name (the first word between the <> tag) without any other character around it.

For more information about various CSS Selectors, see CSS Selectors on Mozilla Developer Network.