THINK

Inline img tags by default is positioned such that it has an additional bottom spacing relative to its parent block element. If the parent block element e.g. div have zero padding and the img have zero margin, the img height will not equal to the div height as the additional spacing will push the parent border further downwards.

This is because the inline img tries to compensates for character decendants when positioned inline with adjacent text. charater decendants are the “tails” in “g”, “j”, “p”, “q” and “y” that extend downwards.

To remove the spacing, set the img vertical-align to bottom. In the absence of adjacent text, this would make img ignore the compensation, resulting in equal-height div and img.

A lot of times I had to look for a data structure to store one to many relationships such as a list of products keyed by their categories. I remember the last time I coded in C++ I used a whole lot of std::multimap to do just this.

With C#, there isn’t such a container. The only way is to construct your own container by creating some sort of Dictionary<Key, List>.

Better still, if you only need to add elements once you can just use a simple List<data>, add your data by List.Add() then make a LINQ call to List.ToLookup(). And you immediately have a one to many mapping. This is much more elegant since you do no need to check the dictionary for existing key each time you want to add data.