<a> element margin-collapse

[baixiaoyu2997]

element margin-collapse(sorry for my english)

[Justineo]

Hi, can you describe the issue more clearly?

[baixiaoyu2997]

@Justineo
ok ,see this img:

i think margin did not achieve the desired effect，this is a wrong click area

[Justineo]

As I understand, the top margin is by design, by applying a ::before pseudo element to <h2>, probably to keep the heading away from the top nav. But I think the generated DOM structure is not correct (there's an <a> inside another <a>). Maybe it should be something like:

<h2 id="Cimposing-with-Components">
  <a href="#Cimposing-with-Components" data-scroll>Composing with Components</a>
</h2>

[Jinjiang]

The problem seems caused by:
https://github.com/vuejs/vuejs.org/blob/3b3b9b50e8dbdc3404bea5452c0bb7cd424b359e/themes/vue/source/css/page.styl#L57
and
https://github.com/vuejs/vuejs.org/blob/3b3b9b50e8dbdc3404bea5452c0bb7cd424b359e/themes/vue/source/css/page.styl#L222

I found that if the value isn't very small (greater than approximately 20px), it won't affect the space above headings. But the greater it is, the more it will cover the content above.
So I reduced the value.
At the same time I used a little trick to remove the inner <a> which is generated from markdown parser.
See: #1253