CSS Endless Voids of Time with display: inline-block
The evil seduction of working with CSS comes in the form of its ease of use—in theory. The problems start when you drift into complexity. I find it a psychological game where you are constantly tempted to trap yourself in something complicated (usually because Microsoft Internet Explorer continues its decades-long tradition of not supporting something correctly). You can look up and find hours have gone by because the layout fails to show the expected results.
The way to get out of this physiological trap is to find a way to strip out the complexity down to a known state. Many of these known states (from my CSS work) are preserved in my Node.JS repo. My latest specimens mark a big change in my block layout strategy. Before support for display: inline-block was widely available, my strategy depended on using the float property.
Using float on one block (usually an image) next to a larger static flow (like a paragraph) is still very attractive to me. But floating multiple blocks can be frustrating. This is where display: inline-block comes to the rescue. But this new tool in my chest is not perfect. In “CSS display: inline-block: why it rocks, and why it sucks,” Robert Nyman writes:
I hope so far that I have managed to get you to realize the potential and simplicity of this approach. However, there’s one giant drawback, that might or might not apply to your use case. That is, since the elements become rendered inline, white-space in your HTML code will affect the rendering.
I literally spent hours (maybe two or more) struggling with this white-space issue. According to a German donkey on StackOverflow.com, the official way out is use white-space-collapse: discard. But, typically, this property is not supported on most browsers. So a hack (typical, again) was suggested—use HTML comments:<p><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--></p>I haven’t tried this in Visual Studio for fear of needing to tweak my code formatting settings.
Another very subtle problem I had was accidentally nesting an inline-block display within an inline-block display. I am no CSS “ninja” so I see no reason why I need to do this. It took a significant amount of time to strip this complexity away and get back to a known state. I wasted time trying to convince myself that Firefox’s implementation of inline-block did not support siblings with different margins. My Studio sample proved me ridiculous. What was really going on was the unwanted nesting.