[img] display: block

[lukasoppermann]

Hey,

how about adding this, to avoid the unwanted, very weird space below images. Or is this issue already covered with something else?

img{
    display: block; /* avoids space at bottom */
}

[thomasdigby]

I think this issue can be avoided with any vertical-align property, try vertical-align: middle;

[lukasoppermann]

But I still think something like this should be included. Anything that removes this weird issue is fine.

[jgthms]

Having img { display: block;} is way too opinionated, and will cause lots of problems. Images are considered inline content, although they have a width and a height. You can also put several of them on a singe line. I want to keep that default behaviour as much as possible.

Adding a vertical-align: top could be possible, but trigger other problems.

[lukasoppermann]

Hmm, I do understand that img { display: block;} is to opinionated, but I feel providing an out of the box solution, whatever you would choose for it, would be good.

[thomasdigby]

Harry Roberts uses a vertical-align in his discovr repo, I think it's fairly safe to use in this context. https://github.com/thomasdigby/discovr/blob/master/css/elements/_elements.images.scss

[jgthms]

vertical-align: middle is not a good option as it breaks the natural flow of a paragraph of text:

The only options that would both remove the space at the bottom and leave an image readable in a block of text are:

vertical-align: sub;
vertical-align: text-bottom;
vertical-align: bottom;

Not sure what option is the best.

[thomasdigby]

vertical-align: text-bottom might be the closest match to the default baseline property without rendering the space underneath. https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

[jgthms]

Looks like a good candidate.

[lukasoppermann]

@jgthms could you implement it or would you accept a PR?