Header with inline image does not work in SE's Markdown

Question

_{I decided to rewrite the whole question in order to address some points made by James and HackerKarma in the comments. Sometimes I forget the way this site works. :)}

I decided to come here and ask for guidance about the Markdown support in the StackExchange framework. There is this thread in TeX.sx in which I'd like to include an image reference near each header (in order to provide more info on each journal's location). The following Markdown code shows my humble MWE:

# Title

Hello, I am a title.

# ![][1] American title.

Hello, I am an American title.

[1]: http://i.stack.imgur.com/7f1Lm.png

I tried it in SE's own editor, but both preview and final result lead to the following ouput (note that the American flag was not aligned to the header text):

Then I decided to take a look in another Markdown editor to see if the result was similar to the one I got before. I tried StackEditor (which is not in any way affiliated with StackExchange) and got something along the lines of my original expectations:

Then I decided to ask you people if this behavour is actually intentional (by design) or perhaps an issue in the Markdown parser?

In the comments, James raised a valid point asking if the output should really work like that. Markdown seemed to be a loose format in its beginnings, so each implementation would handle things differently. Even extensions were available, in which, to a certain extent, deviates from the original intention, but that is beyond the point. :)

I found a Markdown spec attempt in CommonMark which aims at shedding some light on the ambiguity of the original proposal. I found the following paragraph which covers my doubt:

Parsing has two phases:

1. In the first phase, lines of input are consumed and the block structure of the document—its division into paragraphs, block quotes, list items, and so on—is constructed. Text is assigned to these blocks but not parsed. Link reference definitions are parsed and a map of links is constructed.

2. In the second phase, the raw text contents of paragraphs and headers are parsed into sequences of Markdown inline elements (strings, code spans, links, emphasis, and so on), using the map of link references constructed in phase 1.

But as I mentioned, I don't know if the original SE implementation covers this very specific case. So I'd like to know if the behaviour is intentional or not. :)

Answer 1

This has nothing to do with Markdown processing. Comparison of StackEdit HTML output and SE HTML output shows them to be essentially identical. And you can reproduce the layout issue directly in HTML:

<h1><img src="http://i.stack.imgur.com/7f1Lm.png">American Title</h1>

renders as

American Title

Why? Because SE style is to have 1em bottom margin for images, unless they appear within a paragraph:

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

The margin isn't there for inline images like this one.

The margin could be removed with additional style rules for images in a header:

.post-text h1 img {margin-bottom:0}
.post-text h2 img {margin-bottom:0}
.post-text h3 img {margin-bottom:0}

although the benefit/cost ratio is questionable.