Why are `<img>` elements given `display: table;`?
6twenty opened this issue · comments
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;
}
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.
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.
resolved in version 2.
display: inline-block;
vertical-align: top;