Displaying indented text correctly

[W8 4me]

Hi all,

I want to remove as many 'br' and 'strong' and 'em' tags as possible from my page, so everything's pretty much controlled by CSS.

I have a bit of an issue which I hope you can help me with.

.indent2 { margin-left: 10px; }
.indent3 { margin-left: 20px; }
.indent4 { margin-left: 30px; }

<strong>word1:</strong> word2
<br /><span class="indent2"><strong>word3:</strong> word4</span>
<br /><span class="indent3"><strong>word5:</strong> word6</span>
<br /><span class="indent4"><strong>word7:</strong> word8</span>
<br /><span class="indent4"><em>word9</em></span>

I've tried a few ways to compact the code (using h3/h4 tags - (h1 and h2 are used for other headings)) to align it more with CSS but this always causes words 2,4,6,8 to be pushed down a line.

The output should look like this-ish:

word1: word2
 word3: word4
  word5: word6
   word7: word8
   word9

[Cory R]

When using the headings you would need to remove the next line-break and set the headings default margin to '0'.

[W8 4me]

So I'd still need to keep the spans but just change the strong's and em to h3 and h4 with margin 0?

[Cory R]

It really depends on what you prefer. If you're wanting to use headings you would set the margin to '0' and remove the next line break. I'm not entirely sure why you're wanting to use headings, however. The STRONG and EM tags can be accomplished with CSS. Your current setup does appear to work for the most part.

[W8 4me]

.indent2 { margin-left: 10px; display: block; }
.indent3 { margin-left: 20px; display: block; }
.indent4 { margin-left: 30px; display: block; }
h3 { font-size: 12px; font-weight: bold; margin: 0px; display: block; }
h4 { font-size: 12px; font-style: italic; font-weight: normal; margin: 0px; display: block; }

<h3>word1:</h3> word2
<span class="indent2"><h3>word3:</h3> word4</span>
<span class="indent3"><h3>word5:</h3> word6</span>
<span class="indent4"><h3>word7:</h3> word8</span>
<span class="indent4"><h4>word9</h4></span>

I still get the same problem - words 2,4,6,8 are being pushed down a line! arrggh!

[Cory R]

http://prntscr.com/2glx5

That's what I see in Firefox 5.

[W8 4me]

Yes... it's still wrong.

[Cory R]

Change 'block' to 'inline-block'.