Why are <img> elements given display: table;?

[6twenty]

On one hand I'm just curious what the design choice here was about; on the other hand there's an issue when there's an <img> element within a container with .ta-center/.ta-right -- the image won't respect the text alignment. This can be worked around however by setting appropriate margins on the image:

.ta-center img {
  margin-left: auto;
  margin-right: auto;
}

.ta-right img {
  margin-left: auto;
}

[tylerchilds]

The only real reason was for chopping off the ghost pixels (~4px) below the image to get it to fall perfectly on the baseline grid for vertical rhythm. I don't think it's something worth working around, I just didn't see the negative consequences at the time.

I'll make sure this gets resolved so images display as expected by default.

[abdobouna]

I think the problem is due to the display of the <img> which is set to inline by default, that makes it inherit the line-height of the parent container, thus setting the container to line-height: 1 effectively gets rid of the spacing, another method would be to give the <img> a display: inline-block or block which also gets rid of the line-height / spacing problem.

[tylerchilds]

resolved in version 2.

display: inline-block;
vertical-align: top;