This question has already been answered:

There are three li . They display: inline-block and margin-right: 19px .

It also adds 3px (blue circle). How to remove?

enter image description here

Reported as a duplicate by members km , kmv , Denis Bubnov , rjhdby , Grundy 15 Feb '17 at 20:19 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

4 answers 4

Add parent font-size:0 . Well, kiddies, respectively, correct font size.

  • They would explain in passing why the font-size is exactly andreymal
  • "How to remove?" (c) This is the answer to the question. If an explanation is needed, this should be indicated in the question. - NeedHate
  • In my opinion this is somewhat contrary to the essence of SO. - andreymal

an inline-block is essentially a letter / word; according to this, a line break or a space between the letters will create this indentation

The surest option, in my opinion, is not to go into the css with various hacks, but to use the comments. Like that:

 <div> <div></div><!-- --><div></div><!-- --><div></div> </div>

Then between the elements there will be no space characters or a line break.

Or do not transfer the line between these elements.

 <div> <div></div><div></div><div></div> </div>
  • Unfortunately the list is generated by the plugin. The option above is best suited. - Temur Begiev

You can set display: table for the parent of these three blocks, and display: table-cell for the blocks themselves.
Then the blocks themselves will be the same in height and will try to occupy the entire height of the parent.

 .parent { width: 100%; border: 1px solid black; height: 100px; display: table; } .child { width: 33%; display: table-cell; } .red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } 
 <div class="parent"> <div class="child red"></div> <div class="child green"></div> <div class="child blue"></div> </div>

    You are watching inline indents. How to fix them? There are several options:

    Option 1

    In the markup we remove the carry for the buttons.

     <main> <button>Кнопка</button><button>Кнопка</button><button>Кнопка</button> </main>

    Option 2

    Parent font-size: 0; and already to the button we set the desired font size.

     main { font-size: 0; } button { font-size: 14px; }

    Option 3

    You can comment out the end and the beginning of the line.

     <main><!-- --><button>Кнопка</button><!-- --><button>Кнопка</button><!-- --><button>Кнопка</button><!-- --></main>