Mathjax weird spacing before and after display math

Question

I am using MathJax to render math on my site and noticed a problem with spacing unequality before and after the "display"/"block" math.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    displayAlign: "left",
    tex2jax: {
        inlineMath: [ ['\\(','\\)'] ],
        displayMath: [ ['\\[','\\]'] ],
    },
	  CommonHTML: { linebreaks: { automatic: true } },
    "HTML-CSS": { linebreaks: { automatic: true } },
    SVG: { linebreaks: { automatic: true } },
    TeX: {extensions: ['AMSmath.js', 'AMSsymbols.js']}
});
</script>

<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=default"></script>

MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
<br>
<br>
\[ R_{\mu \nu }-{\tfrac {1}{2}}R\,g_{\mu \nu }+\Lambda g_{\mu \nu }={\frac {8\pi G}{c^{4}}}T_{\mu \nu } \]
<br>
<br>
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM

As you can see the spacing after the math is bigger (55px) than spacing before (39px) it while it should be equal.

How to fix this?

Answer 1

It's not from mathjax, it's from your html. Inspect elements (F12), you see only one <br> is taken after the MMM... line, and two are taken after the equation

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    displayAlign: "left",
    tex2jax: {
        inlineMath: [ ['\\(','\\)'] ],
        displayMath: [ ['\\[','\\]'] ],
    },
	  CommonHTML: { linebreaks: { automatic: true } },
    "HTML-CSS": { linebreaks: { automatic: true } },
    SVG: { linebreaks: { automatic: true } },
    TeX: {extensions: ['AMSmath.js', 'AMSsymbols.js']}
});
</script>

<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=default"></script>

MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM<br>
<br>
<br>
\[ R_{\mu \nu }-{\tfrac {1}{2}}R\,g_{\mu \nu }+\Lambda g_{\mu \nu }={\frac {8\pi G}{c^{4}}}T_{\mu \nu } \]
<br>
<br>
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM