Why is there an unexplainable gap between these inline-block div elements

Question

I have two inline-block div elements  that are the same  positioned next to eachother  However there seems to be a mysterious space of 4 pixels between the two divs despite the margin being set to 0  There are no parent divs effecting them - What is going on   CSS   container       display inline-block      position relative      background rgb 255 100 0       margin 0px      width 40       height 100px        This is what i want it to look like

User · Accepted Answer

In this instance  your div elements have been changed from block level elements to inline elements  A typical characteristic of inline elements is that they respect the whitespace in the markup  This explains why a gap of space is generated between the elements   example   There are a few solutions that can be used to solve this   Method 1 - Remove the whitespace from the markup  Example 1 - Comment the whitespace out   example    lt div gt text lt  div gt  lt  -- -- gt  lt div gt text lt  div gt  lt  -- -- gt  lt div gt text lt  div gt  lt  -- -- gt  lt div gt text lt  div gt  lt  -- -- gt  lt div gt text lt  div gt    Example 2 - Remove the line breaks   example    lt div gt text lt  div gt  lt div gt text lt  div gt  lt div gt text lt  div gt  lt div gt text lt  div gt  lt div gt text lt  div gt    Example 3 - Close part of the tag on the next line  example    lt div gt text lt  div  gt  lt div gt text lt  div  gt  lt div gt text lt  div  gt  lt div gt text lt  div  gt  lt div gt text lt  div gt    Example 4 - Close the entire tag on the next line   example    lt div gt text  lt  div gt  lt div gt text  lt  div gt  lt div gt text  lt  div gt  lt div gt text  lt  div gt  lt div gt text  lt  div gt    Method 2 - Reset the font-size  Since the whitespace between the inline elements is determined by the font-size  you could simply reset the font-size to 0  and thus remove the space between the elements   Just set font-size  0 on the parent elements  and then declare a new font-size for the children elements  This works  as demonstrated here  example    parent       font-size  0      child       font-size  16px      This method works pretty well  as it doesn t require a change in the markup  however  it doesn t work if the child element s font-size is declared using em units  I would therefore recommend removing the whitespace from the markup  or alternatively floating the elements and thus avoiding the space generated by inline elements   Method 3 - Set the parent element to display  flex  In some cases  you can also set the display of the parent element to flex   example   This effectively removes the spaces between the elements in supported browsers  Don t forget to add appropriate vendor prefixes for additional support    parent       display  flex     parent  gt  div       display  inline-block      padding  1em      border  2px solid  f00       x000D   x000D   parent   x000D      display  flex  x000D    x000D   parent  gt  div   x000D      display  inline-block  x000D      padding  1em  x000D      border  2px solid  f00  x000D    x000D   lt div class  parent  gt  x000D       lt div gt text lt  div gt  x000D       lt div gt text lt  div gt  x000D       lt div gt text lt  div gt  x000D       lt div gt text lt  div gt  x000D       lt div gt text lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      Sides notes   It is incredibly unreliable to use negative margins to remove the space between inline elements  Please don t use negative margins if there are other  more optimal  solutions

User · Answer

The easiest fix is to just float the container   eg  float  left   On another note  each id should be unique  meaning you can t use the same id twice in the same HTML document  You should use classes instead  where you can use the same class for multiple elements   container       position  relative      background  rgb 255  100  0       margin  0      width  40       height  100px      float  left

User · Answer

You need to add   container       display inline-block      position relative      background rgb 255 100 0       margin 0px      width 40       height 100px      margin-right -4px      because whenever you write display inline-block it takes an additional margin-right 4px  So  you need to remove it

User · Answer

Found a solution not involving Flex  because Flex doesn t work in older Browsers   Example    container       display block      position relative      height 150px      width 1024px      margin 0 auto      padding 0px      border 0px      background  ececec      margin-bottom 10px      text-align justify      box-sizing border-box      white-space nowrap      font-size 0pt      letter-spacing -1em      cols       display inline-block      position relative      width 32       height 100       margin 0 auto      margin-right 2       border 0px      background lightgreen        box-sizing border-box      padding 10px      font-size 10pt      letter-spacing normal      cols last-child       margin-right 0

User · Answer

Using inline-block allows for white-space in your HTML  This usually equates to  25em  or 4px    You can either comment out the white-space or  a more commons solution  is to set the parent s font-size to 0 and the reset it back to the required size on the inline-block elements

User · Answer

simply add a border  2px solid  e60000  to your 2nd div tag CSS   Definitely it works   Div2Id       border  2px solid  e60000  -- gt  color is your preference

[html] Why is there an unexplainable gap between these inline-block div elements?

Method 1 - Remove the whitespace from the markup

Method 2 - Reset the `font-size`

Method 3 - Set the parent element to `display: flex`

Sides notes:

Examples related to html

Examples related to css

Examples related to margin

Examples related to padding