Circle between inline-block elements in firefox

Asked

Viewed 50 times

0

I wonder what are these circles inserted between some elements with display inline-block in the firefox Mozilla, because they take up space and disturb the layout.

inserir a descrição da imagem aqui

1 answer

0

When using display: inline-block and the elements (div, span, etc.) have spaces between them, the browser (not only firefox) add 4px space between elements, this is something that has been discussed for many years and has not implemented a CSS property that removes this using inline-block, but there are several ways to solve this.

Some of them:

Leave no spaces between elements:

<div>div inline-block 1</div><div>div inline-block 2</div>

Comment on spaces

<div>div inline-block 1</div><!--
--><div>div inline-block 2</div>

Using negative margins, etc...

For more information see this post:

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

What I currently use that for me is the best option, is an Adobe source called Adobe Blank, that removes this "Carectere", then you declare in the parent div the Adobe Blank font, and in the daughters Ivs you declare the font you wish.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.