How indenting html can impact layout

April 9th 2014 by Samuel Rossille

Recently, a developer of my team pushed on our Gerrit server a change that was an innocent fix of the indentation of an HTML file.

I asked him if he had tested on several browsers that the layout was still OK, and an other developer asked me why changing only white space characters between HTML tags could possibly impact the layout.

Having fallen myself several times into the trap, I decided to write a blog post to give an example of a layout that can become broken after fixing indentation. Of course, there might be other cases I'm not aware of.

You will notice that the disaster could have been avoided with a different way to use CSS to achieve the desired layout. But on a large code-base, you cannot make the assumption that 100% of the code is totally foolproof.

Example:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .column {
                width: 400px;
                padding: 20px;
                margin-left: auto;
                margin-right: auto;
                border-left: 1px dashed #444;
                border-right: 1px dashed #444;
            }
            .left, .right {
                display: inline-block;
                vertical-align: top;
                width: 50%;
                height: 100px;
            }
            .left > p, .right > p{
                margin: 10px;
            }
            .left {
                background-color: lime;
            }
            .right {
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div class="column">

            <h1>Indentation effect on layout</h1>

            <h2>Not indented</h2>
            <!-- See that ugly long line ? -->
            <span class="left"><p>Did you see that "lime" ? Default html colors are awesome!</p></span><span class="right"><p>Now I'm thinking about a swimming pool :=( and I can't focus any more...</p></span>

            <h2>Indented</h2>
            <!-- See that nicely indented code ? -->
            <span class="left">
                <p>Did you see that "lime" ? Default html colors are awesome!</p>
            </span>
            <span class="right">
                <p>Now I'm thinking about a swimming pool :=( and I can't focus any more...</p>
            </span>
        </div>
    </body>
</html>

So what happens?

This: how-indenting-html-can-impact-layout In this case, the blocks are inline, and any sequence of whitespace characters between two inline elements will be interpreted as a space, which will have a standard width depending on the font used. In the indented example, the lime and aqua blocks both have a 50% width, so the small width of the space is too much to allow the aqua block to fit on the same line. The flow layout will continue on the next line.

Bonus

Eclipse HTML auto-format feature is aware of this, and when you do SHIF+CTRL+F on an HTML file, even if you get horrible things, it will never:

        <h2>Not indented</h2>
        <span class="left"><p>Did you see that "lime" ? Default
                html colors are awesome!</p></span><span class="right"><p>Now I'm
                thinking about a swimming pool :=( and I can't focus any more...</p></span>

        <h2>Indented</h2>
        <span class="left">
            <p>Did you see that "lime" ? Default html colors are awesome!</p>
        </span> <span class="right">
            <p>Now I'm thinking about a swimming pool :=( and I can't focus
                any more...</p>
        </span>

Conclusion

CSS is so full of tricks and traps, that in a release branch - where non-regression is critical - you'd better test even the most innocent changes, and avoid using too unusual ways to implement common visual design patterns.