img tags and baselines

I just wrapped up DesignLab's Design 101 online course - great interactions with real-live mentors.

For my final project I put together a draft to sell my comic So You're Going to Die... my first draft started something like this:

For my second and more or less final draft I started with this rough idea my mentor Charlene Foote sketched out:

The thing is, when I look at it on my computer it was kind of a "cheat", since the boundary of the image was a logical place for the skull to end, but on a webpage, I'd have to figure out what went underneath. At first i thought a pinstripe, but then I finally ended up making the whole bottom a different color:

There was a problem though: the skull there is riding a bit above the div. I could hack it back into place with a position:relative; but that's hardly elegant, but when I was careful to set all relevant padding and margin to, it was still hanging up there?

I think the issue is that imgs are by default "inline", and that's geared to put them on corresponding text baselines. Which is usually a decent default, but the text baseline leaves room for a descender; no good if you're looking to have the image snug with whatever is beneath.

After a little experimenting the simplest solution was making the image display:block; ... inline-block had the same descender issue.

Seems like there's always more to learn in CSS... but especially in js. It's counterintuitive to me how much people can get done with incomplete knowledge... kind of a life lesson, actually.