0

I have three div blocks with display set as inline-block.

I've noticed that there is a little margin between the blocks.

I don't understand where it came from. The CSS reset to margin: 0 padding: 0 didn't have an effect either.

*{
     margin: 0;
     padding: 0;
 }
        
div{
     display: inline-block;
     background-color: green; 
     width: 100px; 
     height: 100px;
            
}

enter image description here

Is this like a default margin set for inline and inline-block content?

If I want to remove the gaps what methods can I use?

Hanrabong
  • 35
  • 4
  • It doesn't, it's the space you have in html. Connect your divs with a comment in between and the space will disappear. This has been asked before – Huangism Aug 16 '22 at 19:02
  • That's not a margin, but most likely the spaces which the browser generates if in the HTML code those elements are written in different lines. The easiest fix for that is not to have any linebreaks and spaces between them. – Johannes Aug 16 '22 at 19:03
  • @AHaworth font size fix is a hack the last I posted that as an answer and should be avoided – Huangism Aug 16 '22 at 19:04
  • @Johannes Wow after writing the divs in a single line the gaps did disappear. I didn't know html treated code differently if it's written in new lines. – Hanrabong Aug 16 '22 at 19:11
  • @Huangism Hmm, I guess that's a matter of opinion (and definition of 'hack'). However, I've removed the suggestion that font-size be investigated as it's covered in the answers you have linked to as well as the more 'modern' flex sort of approach. – A Haworth Aug 16 '22 at 19:13
  • @AHaworth I used to use it but now I just put comments in between. The main problem with the font size way is that you will have to set the font size again for the inline-block items – Huangism Aug 17 '22 at 13:15

1 Answers1

-1

You can put comment between the div or just put them side by side.

*{
     margin: 0;
     padding: 0;
 }
        
div{
     display: inline-block;
     background-color: green; 
     width: 100px; 
     height: 100px;
     margin-right:;
}
<div></div><!-- || --><div></div><!-- || --><div></div>
pokemon32
  • 24
  • 3