TL;DR: The margin isn’t a margin—it’s a space. Try using display: block; float: left; instead.

ALSO: Checkout the amazing list of techniques to combat inline-block space-margins at CSS Tricks

I’ve made a weird discovery about using the inline-block display. I use inline-block elements on my homepage in the Recent Work section.

I noticed that the math for these block elements wasn’t quite adding up—the element width + padding + margin + border should’ve enabled three items on one line; however, the elements were wrapping.

Here’s an example of what I’m talking about:

Even though the margin of each element is set to zero there is seemingly, a margin, between each element.

This problem could be easily solved by removing the display property, floating each gallery item and using a clearfix on the parent:

That solution, however, ignores why that space is being added.

The inline-block display property treats block level elements (e.g. <div>) as an inline element (e.g. <span>), and, just like if you had a line break between two <span> elements, the line-break between the <div>s is creating a space between the <div>s. That extra margin is actually a space—not a margin.

Knowing what is creating an inline-block displayed <div>’s “margin” enables you to create a couple of different solutions.

• First, the dumb and breakable solution, you could remove the spaces and line-breaks in your html
• Second, directly address the space by setting a negative right margin or negative word-spacing for those elements
• Or, Finally, just use display: block; float: left;

Here’s an example of what the second solution would look like:

At Custom Channels we have our own API for Album Art. Our Album Art API was designed before I got here, it was designed for the single use-case of the Custom Channels standard flash player (i.e. 125×125 gif) and isn’t what you’d call “future proof”.

ANYWAY, we’re revisiting some of the Custom Channels’ site design and one idea I had is to show a handful of recently played albums from a few channels on our homepage. And a 125×125 gif ain’t gonna to cut the mustard!

This brings us to the topic of this post—the Amazon Product Advertising API—Step-by-Step.

This assumes you’ve already got a development environment that runs PHP5.

• The first thing to do, if you haven’t already, is to register for Amazon Web Services

• After you’ve registered for a AWS account, login to your account and go to the “My Account/Console” pulldown at the top and click, “Security Credentials”

• Scroll down to “Access Credentials”
  

• Copy your “Access Key ID”, click “Show” and copy your “Secret Access Key”

• Go ahead and clone the Amazon ECS PHP Library to your development environment

  $ git clone https://github.com/Exeu/Amazon-ECS-PHP-Library.git

• You’ll only be using the file lib/AmazonECS.class.php so copy that wherever you’d like

• Once you’ve got that file it’s easy-peasy-lemon-squeezy:

  	<?php
  	require_once 'lib/AmazonECS.class.php';
  	$track = $_GET['track'];
  	$access_key_id = 'YOUR ACCESS KEY ID';
  	$secret_access_key = 'YOUR SECRET ACCESS KEY';
  	$affiliate_id = 'YOUR AFFILIATE ID';
  	$client = new AmazonECS($access_key_id, $secret_access_key, 'com', $affiliate_id);
  	$response = $client->category('DigitalMusic')->responseGroup('Images')->search($track);
  	if (getType($response->Items->Item) == 'object') {
  	echo '<img src="' . htmlspecialchars($response->Items->Item->LargeImage->URL) . '">';
  	} elseif (getType($response->Items->Item) == 'array') {
  	echo '<img src="' . htmlspecialchars($response->Items->Item[0]->LargeImage->URL) . '">';
  	} else {
  	echo 'Not Found!';
  	}

  view raw amazon-album-art.php hosted with ❤ by GitHub
  The code above will take the argument from the “track” url parameter and search Amazon’s digital music store and output the large-format album art for the top match.