Web Design Quick Tip: Escaping The Phantom Image Zone
Isolation in the Phantom Zone, an eternal living death….well…ok, it’s not that bad, I don’t care how much you hate CSS.
As a developer it’s a common adage that a website is never done, merely abandoned. As such perfecting a platform is a constant journey in refinement; it’s often the myriad of tiny details that can drive a normally sane person into full blown OCD. One of the items that can frequently plague early web designers is images – how they are positioned, their size, their load time, and how they display on mobile versus desktop.
These are less of an issue for “push here dummy” designers who let pre-made plugins and templates do all their work for them, but for the rest of us who actually care about the quality of our work and understanding how to fix issues ourselves things are not so simple.
One of the more elusive issues involving images is the strange phantom space that often appears at the bottom of an image when the border style attribute is applied to it’s parent div. Inspecting element and looking at the code itself will display no noticeable reason why the image should have this space – nonetheless there it is, like a blight on our beautiful design.
So, why does this happen?
This phantom zone or gap isn’t really a bug, but rather is the default behavior for replaced elements (like images) in css. By default browsers compute these elements display property to be inline, but they give them a special behavior which actually makes them behave more like inline-block elements. Depending on its type, an image may have an intrinsic width and height, but will not necessarily have them. (source) For instance, SVG images have no intrinsic dimensions.
So How do we fix it?
Well, like many things in layout code, there isn’t always necessarily just one way to fix the problem. Everyone does things a little differently and there are also a few legitimate ways to fix this minor issue as well.
You can use display:block or vertical-align:bottom on the css of the image tag itself if that’s to your liking.
You can also use line-height:0 on the parent container div holding the image itself.
Fact is, either one of these solutions should work for you, they just solve the problem in a slightly different way. This sort of minor detail is the kind of thing many would overlook but which an enterprising developer could not allow to be published – now you know why we’re all just a little bit crazy. Think we’re full of bull? Got some better solution or found that this particular tip is no bueno? We’d love to hear from you! Any time you have web development, marketing, code, or design questions don’t hesitate to get in touch – we love talking shop and might even feature your question in a future blog!