# mathjax overlapping in <a> element

I want to write some basic mathematical formulas which I handle using mathjax as below:

<html> <head> <style> body a { float: left; margin: 0 2px 20px 0; border: 1px solid #ddd; padding: 1px; -moz-border-radius: 4px; border-radius: 4px; height:36px; width: 36px; } </style> <script type="text/x-mathjax-config"> MathJax.Hub.Config({tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']]}}); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> </head> <body> <a title="\sqrt{a}"> $\sqrt{a}$</a> <a title="\frac ab"> $\frac ab$</a> <a title="\begin{bmatrix}a&b\\ c&d\end{bmatrix}"> $\begin{bmatrix}a&b\\ c&d\end{bmatrix}$</a> </body> </html>

The problem is the overlapping of big formulas. You can see the demo here: https://jsfiddle.net/ev6wf0rd/

Is there a way to configure Mathjax to avoid this problem?

## Answers

You could either :

- Increase the a element size, like here (I modified your jsfiddle)
- Remove size contraints so it's default to auto : demo here
- Decrease size of MathJax items for the elements that overlap demo here