1148189 - Block images sometimes lack bottom margin

Status: VERIFIED FIXED

(Toolkit :: Reader Mode, defect, P5)

Description

[:Margaret Leibovic]

Follow-up to bug 1146373.

The issue here is that we don't want bottom margins to combine to give images a doubly large bottom margin, but if they are on their own, we would like to give them a bottom margin.

A solution for this could be to wrap these images in a <p> when we see them in Readability.js, but I'm not sure if we're okay with modifying the mark-up like that. But that also won't deal with images that have sibling elements within these parent wrapper.

Perhaps we could do something like:

.content img:not(:last-child) {
  margin: 0 0 30px 0;
}

Although that would re-introduce bug 1128916.

Comment 1

[:Margaret Leibovic]

Similarly, I noticed that there's now no padding between images and their captions, e.g. on http://alistapart.com/article/designing-for-easy-interaction.

bwinton, have you looked into any of the content styles? They're a bit challenging, because we have to deal with whatever markup we get from sites, but maybe this is another polish item you would be interested in taking :)

Comment 2

[Blake Winton (:bwinton) (:☕️)]

I haven't looked into them yet, but I'll definitely add this to my big list o' polish bugs!  :)
(Let's leave it unassigned for now, so that someone else has a chance to pick it up before me.)

Comment 3

[Jintao Hu]

Attachment: Bug 1148189 - Add a bottom margin for images that may have accompanying element. r=niklas,mtigley

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b6ca0ad553d2
Add a bottom margin for images that may have accompanying element. r=mtigley

Comment 5

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/b6ca0ad553d2

Comment 6

[Ardelean Oana, Desktop QA [:oardelean]]

I managed to reproduce on Firefox 39.0(20150630154324) on Linux x86_64(Ubuntu 20.04). This issue is fixed on Firefox 98.0b4(20220213185901)/latest Nightly(20220214092817) on macOS Big Sur 11, Win10 and Linux x86_64(Ubuntu 20.04).