Skip to main content
2 of 6
added example with blockquotes

Remove bottom margin on images

Normally, I would provide an image within it's own paragraph like this in markdown:

Some text

![enter image description here][1]

Some Text

Which is rendered like this:

<p>Some Text</p>
<p><img src="https://i.sstatic.net/8ucma.png" alt="enter img description here"></p>
<p>Some Text</p>

But in all.css, there is a bottom margin on both paragraphs and images:

p {
  clear: both;
  margin-bottom: 1em;
}
.post-text img {
  max-width: 630px;
  margin-bottom: 1em;
}

Meaning here's how it will look:

Some text

enter image description here

Some Text


I'm not a fan of the double margin on the bottom:

example

Of course you could terminate the line with a double space in order to get a line break, but I think most images have traditionally been entered in markdown with their own paragraph. Also, it would help keep markdown and the resulting HTML in sync visually.

There also appears to be an issue with the margin pushing down text on inline images

Didn't know if Feedback Requested: Stack Overflow design update was still active, so I'm posting here.

Also Blockquotes!:

Some Text

enter image description here