The Curious Case Of The iFrame Extra Bottom Margin

Image of an example of the extra bottom margin detailed in the post

Please note: This post relates to an ealier website build.

The age of Responsive Web Design (RWD) is most definitely upon us. Gone are the days of designing strictly for 960px; the modern web is viewed on everything from feature phones to games consoles. With this influx in device screen sizes comes compromise, and so the day has finally come to wave off pixel-perfect page layouts with a fond farewell. But while pixel-perfection may be a thing of the past, it’s still nice to try and achieve as close to a perfect layout as humanly possible.

When developing the new (note: now old) Freakyleaf website, I wanted to make use of the SoundCloud music player widget on my music production page. As with most ‘social’ widgets these days, the most convenient way add the SoundCloud music player to a website is via code supplied on soundcloud.com, which just so happens to come in the form of an iframe. Inserting the code for my ‘Examples Of My Work’ set on a page displays the following widget:

SoundCloud Widget on freakyleaf.co.uk
SoundCloud Widget on freakyleaf.co.uk

Lovely stuff. It was only when adding other content to the page however that I found that something wasn’t quite right. This is what I ended up with:

Defalut Iframe Layout With Extra Bottom Margin (Highlighted In Red)
Defalut Iframe Layout With Extra Bottom Margin (Highlighted In Red)

Okay, not a catastrphe, but not exactly how I imagined it looking. Notice the extra space under the widget? That’ll be the curse of the “phantom margin”. I hate this kind of stuff because Chrome’s ‘Developer Tools’ (and consequently Firefox’s ‘Firebug’) acts as if nothing’s wrong, making it hard to diagnose exactly what’s happening. There was one clue however – opening up the ‘Computed Styles’ tab did in fact show that display was set to inline. Inline elements include this “phantom margin” as standard, to give lower-case letters that hang below the line such as ‘g’ and ‘j’ room to exist. Necessary for some elements, not so much for iframes.

So it was with a quick edit to display: block; in the stylesheet and a refresh of the browser and there we were:

Defalut Iframe Layout With Added Bottom Margin
Iframe Layout With ‘display: block;’

Perfect!

As a result, I now include iframe { display: block; } as part of my css reset as standard.

Leave a Reply

Comments will be approved pending moderation.