I would like to know what these circles are inserted between some elements with inline-block display in mozilla firefox, because they occupy space and hinder the layout.
When using display: inline-block
and the elements (div, span, etc) have spaces between them, the browser (not just firefox) adds 4px
space between elements, this is something that is being discussed at many years and walks have not implemented a CSS property that removes this using inline-block, but there are several ways to resolve this.
Some of them:
Do not leave spaces between elements:
<div>div inline-block 1</div><div>div inline-block 2</div>
Commenting on the spaces
<div>div inline-block 1</div><!--
--><div>div inline-block 2</div>
Use negative margins, etc ...
For more information see this post:
What I currently use that for me is the best option, is an Adobe source called Adobe Blank , which removes this "Carectere", then you declare in the parent div the Adobe Blank font, and in the child divs you declare the font you want.