Categories
Web Standards

Removing White Space Below Image Elements, or Why Inline Elements Have Descenders

If you’ve ever tried wrapping an <img> tag in a container and applied a border or background color you will have come across the infamous “why the #$%@$% is there padding space below my image??????!!?” problem. And if you’ve done your due diligence and searched “remove white space below images” you’ve probably found the solution (or this article, which will provide the solution right now): Use CSS to set img as a block level element and the pesky white space below the image magically disappears. It could look something like this:


img {
  display: block;
}

 A Case of Descenders

Now that  you know the solution, let me explain why this is happening. Knowing the reason why will help you remember the solution and also help you understand that this isn’t a bug but a bit of an anachronism left over from a time long past.

Let’s take a quick detour to the world of typography:

Graphic displaying the relationship between ascenders and descenders

When you look at the text I’m writing here you’ll note that lower case letters come in three groups: a, c, e, m, n, o, r, s, u, v, w, x, z, æ, and ø, are uniform in height and contained between the baseline and the median (see graphic above). The other letters have either ascenders (b, d, f, h, k, l, t) or descenders (g, j, p, q, y). The ascender is the portion of the letter that pokes up above the median, the descender is the portion of the letter that dips below the baseline.

Illustration of the descender space created underneath an img element when displayed as default (inline)

What does this have to do with images? Simple: In HTML the <img> tag is an inline element. That means it’s treated as text. And when text is placed on a page, room is made for the descender. In other words, the white space you see below your image is caused by the browser assuming there might be a descender in the text directly before or after the image and therefore making room for it. The problem of white space appears because while images when first introduced were considered inline elements, today we use them mainly as block elements. As I said earlier, this is all due to an anachronism left over from a time long past.

So, to sum up: Images are inline elements that are assumed to have descenders. When you want them to appear as block level, define them as such and the descender magically disappears.

The End.

Categories
Book Reviews CSS HTML

Book Review: Handcrafted CSS: More Bulletproof Web Design

Some context: People keep asking me what books they should read to learn about web design and everything else under the sun. Therefore I’ve decided I’m going to start reading books about web design and everything else under the sun and write reviews of them so you can see if it’s a book you should check out too.

The One Sentence Review

Handcrafted CSS: More Bulletproof Web Design is a book by and for web designers and developers with a solid understanding of HTML and CSS who want to push things further with standards-based code and progressive enhancements through CSS3 and other bleeding edge technologies.

The author(s)

Handcrafted CSS: More Bulletproof Web Design has one of those weird author listings on the front cover: Dan Cederholm with Ethan Marcotte. If you’ve watched the movie Julie and Julia you know that “with” means that the majority of the book is written by Cederholm while a smaller portion is by Marcotte. For this book I’d say the book itself is by Cederholm and that it features an essay by Marcotte that brings in a slightly to the left but still highly relevant aspect that elevates its overall quality and usefulness.

Dan Cederholm is the man behind Simplebits.com and author of the famous book Bulletproof Web Design of which the last edition was published in 2007. I have not read that book and by now I have a feeling it is too outdated to invest in. I might pick it up at the library but it’s doubtful. But people I know and trust say it’s a great book so I’ll make that assumption. Cederholm has created some truly impressive websites over time, many of which you have probably visited, and he’s one of those people who not only knows what he’s doing and does it better than most but also knows how to communicate that knowledge to others so they can step in his footprints rather than stake out their own way through the wilderness.

Ethan Marcotte is the man behind UnstoppableRobotNinja.com and he pops up as the co-author of several books including Designing with Web Standards which is one of the next books on my long list of things to read. Like Cederholm Marrcotte has worked on some pretty impressive projects over the years and his understanding of how the web works is hard to rival, even for Cederholm.

Both these gentlemen are at the very forefront of web design and development where standards and best-practices are concerned. As such this combo bodes well for the book they’ve collaborated on.

The Book Itself

Excluding front and index matter and preface Handcrafted CSS: More Bulletproof Web Design is a fairly short book of 204 pages. It’s in an unusual square-ish shape and comes in full colour with a nice and easy-to-read page layout. Considering the length of other books on the same subject matter it’s easy to think this book to be a little too light on material and substance. That would be a big mistake. These pages are heavy on real-world examples and applications with very little filler text. Although it has the sub-title “More Bulletproof Web Design” the book does not work as an extension of the original book but rather as an appendix. In other words it stands on its own. As a designer/developer with a firm understanding of HTML, CSS and all that surrounds these two code languages I found the book to be an engrossing and immersive read with bucketloads of valuable input. But I can see that without such a solid platform to stand on I would have judged the matter as both superficial and overtly simplistic. Which is the surprising consequence of Cederholm and Marcotte’s clean-and-simple approach.

Having worked with web design and development for many years I’ve noticed that as my understanding and skill set improves, my code becomes more and more simplistic and clean while the end result of that same code becomes more advanced. Handcrafted CSS latches onto this by providing even more simplistic and cleaner code examples and solutions to create well functioning and æsthetically pleasing websites. This is a huge benefit if you’re well versed in web code and a devestating detrement if you’re just starting out: If you don’t have a firm grasp on the code and understand what Cederholm and Marcotte is trying to do this book will seem like a series of disjointed code examples that at the same time go in too much detail and skim over the important stuff.

Futureproofing, progressive enrichment and clearing floats

Cederholm’s portion of the book concerns itself with three major elements:

  • Futureproofing
  • Progressive enrichment through CSS3 (in particular rounded CSS corners, RGBA colours and drop-shadows)
  • A better model for handling floats and clears

These are all hugely important considerations as both the web and the devices we ingest it on evolve but they are easily overlooked because they seem peripheral or subordinate to the issue of getting the content out and working properly.

Cederholm’s approach (and the root of the name of the book) is that a craftman goes the extra mile to add often invisible but still vital elements to her creations to make them stand out. Those elements, or enrichments, can be anything from a properly wrapping list item to a custom ampersand symbol, a gracefully degrading rounded corner or just introducing a semantically sound solution to float and clear management.

FYI: If you’re considering buying this book and the sentence above made you shake your head or think “what the hell is he talking about” I would recommend getting something else instead.

To me Cederholms chapters were divided evenly between verification, a-ha moments and new information. His approaches to futureproofing – making sure that designed elements are able to handle content that goes beyond the original drafts (i.e. a button with text that spans more than one line or has long words in it) – are ones I have strived to live up to even before reading the book. Thus seeing him applying the same philosophies and techniques in his QA process was a verification that I am on the right track. When I started on the section on a semantic solution to floats and clears and saw his ingenious .group solution I was left thinking “What the hell have I been doing all this time? This makes way more sense!” Needless to say the lessons learned from these chapters are now being implemented in all my current and future projects. And as I worked my way through the CSS3 examples and Cederholm’s pragmatic “progressive enrichment” approach I gained confidence and found a desire to start incorporating drop shadows, RGBA colours and rounded corners in my designs now rather than wait for all the browsers to get with the program.

Actually, Cederholm’s attitude toward progressive enrichment deserves special mention here. Whereas a large majority of web professionals have made Internet Explorer bashing into a competitive sport Cederholm proposes a more pragmatic approach: Rather than designing for cutting edge browsers and being frustrated by older browsers not keeping up he creates designs that incorporate rewards for more forward-thinking browsers while incorporating clean and simple solutions for the older generation. This is the only reasonable approach and one I’ve been promoting myself for years so it’s good to see I’m not standing alone on this.

The Fuid Grid

Although Ethan Marcotte’s contribution to the book is only a singular chapter it is a hugely important one. As the title suggests it concerns, and solves, what has been a bit of a mystery for many: The Fluid Grid. Grid-based layouts have been a pillar of print design since the early 1920s and have started making their way onto the web. There are many reasons for this, none of which I will cover here. The challenge with grids on the web has always been that they are either entirely static or at the very least have static elements. This becomes a problem when visitors use devices with unusual or small screen sizes (think a phone, an iPad or a vertically oriented screen) because they are often forced to scroll left and right to access the information on the screen. Marcotte sets out to create a proper fluid grid layout and manages quite well through the use of relative sizes like em and % combined with a fair bit of math. The resulting fluid grid is quite ingenious and introduces flexibility to sites that previously were confined to rigid structures. And practicing what they preach both Marcotte and Cederholm use these types of fluid grid layouts on their own sites. Open them and resize your window to see for yourself.

The Bottom Line

The red line running through Handcrafted CSS: More Bulletproof Web Design is the attitude that a little extra refinement and forethought will bring rewards, in functionality, æsthetics and simplicity. And this attitude is one that can be applied to pretty much every aspect of life, not just web design. Cederholm and Marcotte are both living examples of how well this approach works and their sites stand as testaments to the techniques and parctices.

This book is for the seasoned designer / developer who already has a firm grasp on HTML and CSS but wants to take it further. It is also an excellent introduction to the world of CSS3 and fluid grid layouts for those that want to push their sites and designs into the future. The book is best read while sitting in front of your computer, preferably with a project on hand where the techniques can be implemented immediately. It is when you see the examples take shape and improve your own designs you realize where the value lies in this book. It’s not as much a list of good code examples as a guide to improving your own work. As such the seemingly disjointed code examples actually make a lot of sense: Rather than presenting pre-packaged functional content they are laid out in such a way that they can be slotted into pretty much any project for instant effect. This falls well in line with the theory that new knowledge is best retained when immediately applied to something that matters to the person learning it.

I wholeheartedly recommend this book wihtin the parameters I just set out and look forward to learning more from both Cederholm and Marcotte.