a problem to <span> the pages

Never assume that you know everything. That's so obvious I'm not even going to explain it further. But also never assume that you know everything that you do actually know. Because you may know it, but you don't know that you know it when you need to know.

So I had a list that looked like this:

the orange lines are just outlines for reference

The list was generated by PHP based on some database values. I offered the user the ability to add additional items using a little Javascript. This worked fine, except that the new items didn't line up with the PHP-generated ones.

Well, obviously it is a CSS problem. So I spent over an hour comparing the individual values of all the computed styles, of the list elements and the box element, and for good measure all the surrounding elements, too. The new items and the PHP-generated items were identical in every way. So not a CSS problem, then. Dammit.

Thank the gods for StackOverflow. I asked, and there did I receive the answer. See, I'm a bit of a neat freak. I like my HTML properly indented. I just started a new job where my employer insists on all the tags being on the same level, with no tabs or whitespaces before them:

<div>
<p>Some text</p>
<div>
<div>
<p>Some more text, woohoo!</p>
</div>
</div>
<div>
<h3>Wait...</h3>
<div>
<p>What the hell div am I in now?</p>
</div>
<div>
<div>Oh, another div. Hi!</div>
</div>
</div>
</div>

Who can read that? My boss, incidentally, is perennially plagued with a problem - his opening tags often don't have closing tags. This drives him crazy. I have not yet pointed out the possible correlation between the two issues, but I feel this vindicates my choice to indent. Show me a man who will tell me this is not easier to read, and I will show you the palm of my hand approaching the upside of your head at a non-fatal but certainly startling velocity:

<div>
  <p>Some text</p>
  <div>
    <div>
      <p>Some more text, woohoo!</p>
    </div>
  </div>
  <div>
    <h3>Wait...</h3>
    <div>
      <p>What the hell div am I in now?</p>
    </div>
    <div>
      <div>Oh, another div. Hi!</div>
    </div>
  </div>
</div>

Anyway, the point of all this is that while indentation is obviously the right way to go, it can cause unexpected issues with inline elements.

<div>
  <p>Some text to explain that 
    <span>the randomly-generated word is </span>
    <span id="randomword">jugularistic</span>
    <span>, but if you want, we can change it.</span>
  </p>
  <input type="button" onclick="getRandomWord();">
</div>

See, this is nicely and logically indented so I can see what the hell is going on. The real example was much more complicated, of course. The problem is the whitespace before each span. The browser seems to interpret it as being part of the <p> tag contents, because it lies between inline elements.

But I knew this! I've known it since I started learning HTML, before I even knew what Javascript was, way back when Netscape was a name ordinary people might have had a chance of knowing. Inline vs. block. So bloody simple.

Of course, the real lesson is I probably need to structure my documents better. Oh, well.

---

Here is the StackOverflow Q&A: http://stackoverflow.com/questions/12853619/dynamically-inserted-content-creates-odd-margin