How do I remove the space between inline inline-block elements

Question

Given this HTML and CSS    x000D   x000D  span   x000D      display inline-block  x000D      width 100px  x000D      background-color palevioletred  x000D    x000D   lt p gt  x000D       lt span gt  Foo  lt  span gt  x000D       lt span gt  Bar  lt  span gt  x000D   lt  p gt  x000D   x000D   x000D    As a result  there will be a 4 nbsp pixel wide space between the SPAN elements   Demo  http   jsfiddle net dGHFV   I understand why this happens  and I also know that I could get rid of that space by removing the white-space between the SPAN elements in the HTML source code  like so    lt p gt       lt span gt  Foo  lt  span gt  lt span gt  Bar  lt  span gt   lt  p gt    However  I was hoping for a CSS solution that doesn t require the HTML source code to be tampered with   I know how to solve this with JavaScript - by removing the text nodes from the container element  the paragraph   like so      jQuery    p   contents   filter function     return this nodeType     3     remove      Demo  http   jsfiddle net dGHFV 1   But can this issue be solved with CSS alone

User · Answer

The simplest answer to this question is to add   css  float  left    codepen link  http   jsfiddle net dGHFV 3560

User · Answer

There is a easy solution in CSS  For example   HTML   lt p class  parent  gt       lt span class  children  gt  Foo  lt  span gt       lt span class  children  gt  Bar  lt  span gt   lt  p gt    CSS   parent       letter-spacing  - 31em       letter-spacing  normal       word-spacing  - 43em     children       display  inline-block       display  inline      zoom  1      letter-spacing  normal      word-spacing  normal      In my opinion writing font-size  0 is not safe when you use it in a project like em  so I prefer purecss  solution   You can check this framework in this link purecss  Enjoy      x000D   x000D   row   x000D      letter-spacing  - 31em  x000D       letter-spacing  normal  x000D       word-spacing  - 43em  x000D   x000D         For better view    x000D      background   f9f9f9  x000D      padding  1em  5em  x000D    x000D   x000D   col   x000D      display  inline-block  x000D       display  inline  x000D      zoom  1  x000D      letter-spacing  normal  x000D      word-spacing  normal  x000D   x000D         For better view    x000D      padding  16px  x000D      background   dbdbdb  x000D      border  3px  bdbdbd solid  x000D      box-sizing  border-box  x000D      width  25   x000D    x000D   lt div class  row  gt  x000D   x000D       lt div class  col  gt 1 lt  div gt  x000D       lt div class  col  gt 2 lt  div gt  x000D       lt div class  col  gt 3 lt  div gt  x000D       lt div class  col  gt 4 lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try this snippet   span       display  inline-block      width  100px      background  blue      font-size  30px      color  white      text-align  center      margin-right  -3px      Working demo  http   jsfiddle net dGHFV 2784

User · Answer

All the space elimination techniques for display inline-block are nasty hacks       Use Flexbox   It s awesome  solves all this inline-block layout bs  and as of 2017 has 98  browser support  more if you don t care about old IEs      Are We Ready to Use Flexbox  Using CSS flexible boxes - Web developer guide   MDN A Complete Guide to Flexbox   CSS-Tricks Flexy Boxes     CSS flexbox playground and code generation tool

User · Answer

Just for fun  an easy JavaScript solution    x000D   x000D  document querySelectorAll   container   forEach clear   x000D   x000D  function clear element    x000D    element childNodes forEach check  element   x000D    x000D   x000D  function check item    x000D    if  item nodeType     3  this removeChild item   x000D    x000D  span   x000D    display  inline-block  x000D    width  100px  x000D    background-color  palevioletred  x000D    x000D   lt p class  container  gt  x000D     lt span gt  Foo  lt  span gt  x000D     lt span gt  Bar  lt  span gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

Add white-space  nowrap to the container element   CSS           box-sizing  border-box     row       vertical-align  top      white-space  nowrap     column      float  left      display  inline-block      width  50     Or whatever in your case     HTML    lt div class  row  gt       lt div class  column  gt  Some stuff lt  div gt       lt div class  column  gt Some other stuff lt  div gt   lt  div gt    Here is the Plunker

User · Answer

Use one of these tricks    Remove the spaces Negative margin Skip the closing tag  HTML5 doesn t care anyway  Set the font size to zero  A space that has zero font-size is    zero width  Use flexbox   See the code below    x000D   x000D  body   x000D    font-family  sans-serif  x000D    font-size  16px  x000D    x000D   x000D  ul   x000D    list-style  none x000D    x000D   x000D  li   x000D    background   000  x000D    display  inline-block  x000D    padding  4px  x000D    color   fff  x000D    x000D   x000D  ul white-space-fix li   x000D    margin-right  -4px  x000D    x000D   x000D  ul zero-size   x000D    font-size  0px  x000D    x000D   x000D  ul zero-size li   x000D    font-size  16px  x000D    x000D   x000D  ul flexbox   x000D    display  -webkit-box  x000D    display  -moz-box  x000D    display  -ms-flexbox  x000D    display  -webkit-flex  x000D    display  flex  x000D    x000D  original    x000D   lt ul gt  x000D     lt li gt one lt  li gt  x000D     lt li gt two lt  li gt  x000D     lt li gt three lt  li gt  x000D   lt  ul gt  x000D   x000D  Funky code formatting    x000D   lt ul gt  x000D     lt li gt  x000D     one lt  li gt  lt li gt  x000D     two lt  li gt  lt li gt  x000D     three lt  li gt  x000D   lt  ul gt  x000D   x000D  Adding html comments    x000D   lt ul gt  x000D     lt li gt one lt  li gt  lt  -- x000D    -- gt  lt li gt two lt  li gt  lt  -- x000D    -- gt  lt li gt three lt  li gt  x000D   lt  ul gt  x000D   x000D  CSS margin-right  -4px  x000D   lt ul class  white-space-fix  gt  x000D     lt li gt one lt  li gt  x000D     lt li gt two lt  li gt  x000D     lt li gt three lt  li gt  x000D   lt  ul gt  x000D   x000D  Omitting the  amp lt  li amp gt  x000D   lt ul gt  x000D     lt li gt one x000D       lt li gt two x000D         lt li gt three x000D   lt  ul gt  x000D   x000D  fixed with font-size  0 x000D   lt br gt  lt br gt  x000D   lt ul class  zero-size  gt  x000D     lt li gt one lt  li gt  x000D     lt li gt two lt  li gt  x000D     lt li gt three lt  li gt  x000D   lt  ul gt  x000D   x000D   lt br gt  flexbox x000D   lt br gt  x000D   lt ul class  flexbox  gt  x000D     lt li gt one lt  li gt  x000D     lt li gt two lt  li gt  x000D     lt li gt three lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

I tried out the font-size  0 solution to a similar problem in React and Sass for a Free Code Camp project I am currently working through   And it works   First  the script   var ActionBox   React createClass       render  function             return               lt div id  actionBox  gt                   lt  div gt                         var ApplicationGrid   React createClass       render  function             var row               for var j 0  j lt 30  j                 for var i 0  i lt 30  i                     row push  lt ActionBox   gt                                    return               lt div id  applicationGrid  gt                   row               lt  div gt                          var ButtonsAndGrid   React createClass       render  function             return               lt div gt                   lt div id  buttonsDiv  gt                   lt  div gt                   lt ApplicationGrid   gt               lt  div gt                         var MyApp   React createClass       render  function             return               lt div id  mainDiv  gt                   lt h1 gt  Game of Life   lt  h1 gt                   lt ButtonsAndGrid   gt               lt  div gt                         ReactDOM render       lt MyApp   gt       document getElementById  GoL        Then  the Sass   html  body     height  100   body     height  100      margin  0     padding  0   mainDiv     width  80      height  60      margin  auto     padding-top  5px     padding-bottom  5px     background-color  DeepSkyBlue     text-align  center     border  2px solid  381F0B     border-radius  4px     margin-top  20px   buttonsDiv     width  80      height  60      margin  auto     margin-bottom  0px     padding-top  5px     padding-bottom  0px     background-color  grey     text-align  center     border  2px solid  381F0B     border-radius  4px     margin-top  20px   applicationGrid     width  65      height  50      padding-top  0px     margin  auto     font-size  0     margin-top  0px     padding-bottom  5px     background-color  white     text-align  center     border  2px solid  381F0B     border-radius  4px     margin-top  20px   actionBox     width  20px     height  20PX     padding-top  0px     display  inline-block     margin-top  0px     padding-bottom  0px     background-color  lightgrey     text-align  center     border  2px solid grey     margin-bottom  0px

User · Answer

Today  we should just use Flexbox   OLD ANSWER  OK  although I ve upvoted both the font-size  0  and the not implemented CSS3 feature answers  after trying I found out that none of them is a real solution  Actually  there is not even one workaround without strong side effects  Then I decided to remove the spaces  this answers is about this argument  between the inline-block divs from my HTML source  JSP   turning this   lt div class  quot inlineBlock quot  gt      I m an inline-block div  lt  div gt   lt div class  quot inlineBlock quot  gt      I m an inline-block div  lt  div gt   to this  lt div class  quot inlineBlock quot  gt      I m an inline-block div  lt  div gt  lt div class  quot inlineBlock quot  gt      I m an inline-block div  lt  div gt   that is ugly  but working  But  wait a minute    what if I m generating my divs inside Taglibs loops  Struts2  JSTL  etc       For example   lt s iterator begin  quot 0 quot  end  quot 6 quot  status  quot ctrDay quot  gt       lt br  gt       lt s iterator begin  quot 0 quot  end  quot 23 quot  status  quot ctrHour quot  gt           lt s push value  quot   days  ctrDay index  hours  ctrHour index   quot  gt               lt div class  quot inlineBlock gt                  I m an inline-block div in a matrix                   Do something here with the pushed object                 lt  div gt          lt  s push gt       lt  s iterator gt   lt  s iterator gt   It is absolutely not thinkable to inline all that stuff  it would mean  lt s iterator begin  quot 0 quot  end  quot 6 quot  status  quot ctrDay quot  gt       lt br  gt       lt s iterator begin  quot 0 quot  end  quot 23 quot  status  quot ctrHour quot  gt  lt s push value  quot   days  ctrDay index  hours  ctrHour index   quot  gt  lt div class  quot inlineBlock gt                  I m an inline-block div in a matrix                               Do something here with the pushed object                 lt  div gt  lt  s push gt  lt  s iterator gt   lt  s iterator gt   That is not readable  hard to maintain and understand  etc  The solution I found  use HTML comments to connect the end of one div to the begin of the next one   lt s iterator begin  quot 0 quot  end  quot 6 quot  status  quot ctrDay quot  gt      lt br  gt      lt s iterator begin  quot 0 quot  end  quot 23 quot  status  quot ctrHour quot  gt  lt  --     -- gt  lt s push value  quot   days  ctrDay index  hours  ctrHour index   quot  gt  lt  --         -- gt  lt div class  quot inlineBlock gt                  I m an inline-block div in a matrix                               Do something here with the pushed object                 lt  div gt  lt  --     -- gt  lt  s push gt  lt  -- -- gt  lt  s iterator gt   lt  s iterator gt   This way you will have a readable and correctly indented code  And  as a positive side effect  the HTML source  although infested by empty comments  will result correctly indented  let s take the first example  In my humble opinion  this       lt div class  quot inlineBlock quot  gt          I m an inline-block div      lt  div gt  lt  --  -- gt  lt div class  quot inlineBlock quot  gt          I m an inline-block div      lt  div gt   is better than this       lt div class  quot inlineBlock quot  gt           I m an inline-block div      lt  div gt  lt div class  quot inlineBlock quot  gt           I m an inline-block div      lt  div gt

User · Answer

I found a pure CSS solution that worked for me very well in all browsers   span       display  table-cell

User · Answer

Two more options based on CSS Text Module Level 3  instead of white-space-collapsing discard which had been dropped from the spec draft     word-spacing  -100     In theory  it should do exactly what is needed     shorten whitespaces     between  words  by the 100  of the space character width  i e  to     zero  But seems not to work anywhere  unfortunately  and this     feature is marked  at risk   it can be dropped from the specification  too     word-spacing  -1ch    It shortens the inter-word spaces by the width of the digit  0   In a monospace font it should be exactly equal to the width of the space character  and any other character as well   This works in Firefox 10   Chrome 27   and almost works in Internet nbsp Explorer nbsp 9    Fiddle

User · Answer

I think there is a very simple old method for this which is supported by all browsers even IE 6 7  We could simply set letter-spacing to a large negative value in parent and then set it back to normal at child elements    x000D   x000D  body   font-size  24px   x000D  span   border  1px solid  b0b0c0       show borders to see spacing    x000D   x000D   no-spacing   letter-spacing  -1em       could be a large negative value    x000D   no-spacing  gt      letter-spacing  normal         gt  back to normal spacing    x000D   lt p style  color red  gt Wrong  default spacing   lt  p gt  x000D   x000D   lt div class    gt  x000D     lt span gt Item-1 lt  span gt  x000D     lt span gt Item-2 lt  span gt  x000D     lt span gt Item-3 lt  span gt  x000D   lt  div gt  x000D   x000D   lt hr  gt  x000D   x000D   lt p style  color green  gt Correct  no-spacing   lt  p gt  x000D   x000D   lt div class  no-spacing  gt  x000D     lt span gt Item-1 lt  span gt  x000D     lt span gt Item-2 lt  span gt  x000D     lt span gt Item-3 lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I   ve been tackling this recently and instead of setting the parent font-size 0 then setting the child back to a reasonable value  I   ve been getting consistent results by setting the parent container letter-spacing - 25em then the child back to letter-spacing normal   In an alternate thread I saw a commenter mention that font-size 0 isn   t always ideal because people can control minimum font sizes in their browsers  completely negating the possibility of setting the font-size to zero   Using ems appears to work regardless of whether the font-size specified is 100   15pt or 36px   http   cdpn io dKIjo

User · Answer

With PHP brackets    x000D   x000D  ul li   x000D    display  inline-block  x000D    x000D       lt ul gt  x000D           lt li gt  x000D               lt div gt first lt  div gt  x000D           lt  li gt  lt   x000D            gt  lt li gt  x000D               lt div gt first lt  div gt  x000D           lt  li gt  lt   x000D            gt  lt li gt  x000D               lt div gt first lt  div gt  x000D           lt  li gt  x000D       lt  ul gt  x000D   x000D   x000D

User · Answer

So a lot of complicated answers  The easiest way I can think of is to just give one of the elements a negative margin  either margin-left or margin-right depending on the position of the element

User · Answer

Add letter-spacing -4px  on parent p css and add letter-spacing 0px  to your span css     x000D   x000D  span   x000D    display inline-block  x000D    width 100px  x000D    background-color palevioletred  x000D    vertical-align bottom  x000D    letter-spacing 0px  x000D    x000D   x000D  p   x000D    letter-spacing -4px  x000D    x000D   lt p gt  x000D       lt span gt  Foo  lt  span gt  x000D       lt span gt  Bar  lt  span gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

I had this problem right now and from font-size 0  I ve found that in Internet nbsp Explorer nbsp 7 the problem remains because Internet nbsp Explorer thinks  Font Size 0     WTF are you crazy man   - So  in my case I ve Eric Meyer s CSS reset and with font-size 0 01em  I have a difference of 1 pixel from Internet nbsp Explorer nbsp 7 to Firefox nbsp 9  so  I think this can be a solution

User · Answer

I m not pretty sure if you want to make two blue spans without a gap or want to handle other white-space  but if you want to remove the gap   span       display  inline-block      width  100px      background  blue      font-size  30px      color  white      text-align  center       float  left      And done

User · Answer

Add comments between elements to NOT have a white space  For me it is easier than resetting font size to zero and then setting it back    lt div gt      Element 1  lt  div gt  lt  -- -- gt  lt div gt      Element 2  lt  div gt

User · Answer

x000D   x000D  span    x000D      display inline-block  x000D      width 50px  x000D      background blue  x000D      font-size 30px  x000D      color white   x000D      text-align center  x000D    x000D   lt p gt  lt span gt Foo lt  span gt  lt span gt Bar lt  span gt  lt  p gt  x000D   x000D   x000D

User · Answer

Unfortunately  it is 2019 and white-space-collapse is still not implemented   In the meantime  give the parent element font-size  0  and set the font-size on the children  This should do the trick

User · Answer

x000D   x000D  p   x000D    display  flex  x000D    x000D  span   x000D    float  left  x000D    display  inline-block  x000D    width  100px  x000D    background  red  x000D    font-size  30px  x000D    color  white  x000D    x000D   lt p gt  x000D     lt span gt  hello  lt  span gt  x000D     lt span gt  world  lt  span gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

Use flexbox and do a fallback  from suggestions above  for older browsers   ul       display  -webkit-box      display  -moz-box      display  -ms-flexbox      display  -webkit-flex      display  flex

User · Answer

This is the same answer I gave over on the related  Display  Inline block - What is that space   There   s actually a really simple way to remove whitespace from inline-block that   s both easy and semantic  It   s called a custom font with zero-width spaces  which allows you to collapse the whitespace  added by the browser for inline elements when they re on separate lines  at the font level using a very tiny font  Once you declare the font  you just change the font-family on the container and back again on the children  and voila  Like this    font-face       font-family   NoSpace       src  url     Fonts zerowidthspaces eot        src  url     Fonts zerowidthspaces eot  iefix   format  embedded-opentype             url     Fonts zerowidthspaces woff   format  woff             url     Fonts zerowidthspaces ttf   format  truetype             url     Fonts zerowidthspaces svg NoSpace   format  svg       body       font-face   OpenSans   sans-serif      inline-container       font-face   NoSpace       inline-container  gt          display  inline-block      font-face   OpenSans   sans-serif      Suit to taste  Here   s a download to the font I just cooked up in font-forge and converted with FontSquirrel webfont generator  Took me all of 5 minutes  The css  font-face declaration is included  zipped zero-width space font  It s in Google Drive so you ll need to click File   Download to save it to your computer  You ll probably need to change the font paths as well if you copy the declaration to your main css file

User · Answer

The CSS Text Module Level 4 specification defines a text-space-collapse property  which allow to control the how white space inside and around an element is processed   So  regarding your example  you would just have to write this   p     text-space-collapse  discard      Unfortunately  no browser is implementing this property yet  as of September 2016  as mentioned in the comments to the answer of HBP

User · Answer

If you re using Twig template engine  you can use spaceless    lt p gt         spaceless         lt span gt Foo lt  span gt       lt span gt Bar lt  span gt         endspaceless     lt  p gt    Note whilst this doesn t address the exact question asked  this could be useful if someone has Twig at their disposal  to avoid using some lesser solution

User · Answer

Negative margin  You can scoot the elements back into place with negative 4px of margin  may need to be adjusted based on font size of parent   Apparently this is problematic in older IE  6  amp  7   but if you don   t care about those browsers at least you can keep the code formatting clean   span     display  inline-block    margin-right  -4px

User · Answer

Since this answer has become rather popular  I m rewriting it significantly   Let s not forget the actual question that was asked      How to remove the space between inline-block elements  I was hoping   for a CSS solution that doesn t require the HTML source code to be   tampered with  Can this issue be solved with CSS alone    It is possible to solve this problem with CSS alone  but there are no completely robust CSS fixes   The solution I had in my initial answer was to add font-size  0 to the parent element  and then declare a sensible font-size on the children   http   jsfiddle net thirtydot dGHFV 1361   This works in recent versions of all modern browsers  It works in IE8  It does not work in Safari 5  but it does work in Safari 6  Safari 5 is nearly a dead browser  0 33   August 2015    Most of the possible issues with relative font sizes are not complicated to fix   However  while this is a reasonable solution if you specifically need a CSS only fix  it s not what I recommend if you re free to change your HTML  as most of us are      This is what I  as a reasonably experienced web developer  actually do to solve this problem    lt p gt       lt span gt Foo lt  span gt  lt span gt Bar lt  span gt   lt  p gt    Yes  that s right  I remove the whitespace in the HTML between the inline-block elements   It s easy  It s simple  It works everywhere  It s the pragmatic solution   You do sometimes have to carefully consider where whitespace will come from  Will appending another element with JavaScript add whitespace  No  not if you do it properly   Let s go on a magical journey of different ways to remove the whitespace  with some new HTML    lt ul gt       lt li gt Item 1 lt  li gt       lt li gt Item 2 lt  li gt       lt li gt Item 3 lt  li gt   lt  ul gt     You can do this  as I usually do    lt ul gt       lt li gt Item 1 lt  li gt  lt li gt Item 2 lt  li gt  lt li gt Item 3 lt  li gt   lt  ul gt    http   jsfiddle net thirtydot dGHFV 1362  Or  this    lt ul gt       lt li gt Item 1 lt  li      gt  lt li gt Item 2 lt  li      gt  lt li gt Item 3 lt  li gt   lt  ul gt   Or  use comments    lt ul gt       lt li gt Item 1 lt  li gt  lt  --     -- gt  lt li gt Item 2 lt  li gt  lt  --     -- gt  lt li gt Item 3 lt  li gt   lt  ul gt   Or  if you are using using PHP or similar    lt ul gt       lt li gt Item 1 lt  li gt  lt         gt  lt li gt Item 2 lt  li gt  lt         gt  lt li gt Item 3 lt  li gt   lt  ul gt   Or  you can even skip certain closing tags entirely  all browsers are fine with this     lt ul gt       lt li gt Item 1      lt li gt Item 2      lt li gt Item 3  lt  ul gt     Now that I ve gone and bored you to death with  one thousand different ways to remove whitespace  by thirtydot   hopefully you ve forgotten all about font-size  0     Alternatively  you can now use flexbox to achieve many of the layouts that you may previously have used inline-block for  https   css-tricks com snippets css a-guide-to-flexbox

User · Answer

Add display  flex  to the parent element  Here is the solution with a prefix   Simplified version    x000D   x000D  p   x000D    display  flex  x000D    x000D   x000D  span   x000D    width  100px  x000D    background  tomato  x000D    font-size  30px  x000D    color  white  x000D    text-align  center  x000D    x000D   lt p gt  x000D     lt span gt  Foo  lt  span gt  x000D     lt span gt  Bar  lt  span gt  x000D   lt  p gt  x000D   x000D   x000D      Fix with prefix    x000D   x000D  p   x000D    display  -webkit-box  x000D    display  -webkit-flex  x000D    display  -ms-flexbox  x000D    display  flex  x000D    x000D  span   x000D    float  left  x000D    display  inline-block  x000D    width  100px  x000D    background  blue  x000D    font-size  30px  x000D    color  white  x000D    text-align  center  x000D    x000D   lt p gt  x000D     lt span gt  Foo  lt  span gt  x000D     lt span gt  Bar  lt  span gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

For CSS3 conforming browsers there is white-space-collapsing discard   see  http   www w3 org TR 2010 WD-css3-text-20101005  white-space-collapsing

User · Answer

Simple   item     display  inline-block    margin-right  -0 25em      There is no need to touch the parent element   Only condition here  the item s font-size must not be defined  must be equal to parent s font-size    0 25em is the default word-spacing  W3Schools - word-spacing property

User · Answer

Though  technically not an answer to the question   How do I remove the space between inline-block elements    You can try the flexbox solution and apply the code below and the space will be remove   p      display  flex     flex-direction  row      You can learn more about it on this link  https   css-tricks com snippets css a-guide-to-flexbox

User · Answer

One another way I found is applying margin-left as negative values except the first element of the row   span     display inline-block   width 100px   background blue   font-size 30px   color white    text-align center   margin-left -5px    span first-child   margin 0px

User · Answer

Every question  that try to remove the space between inline-blocks seems like a  lt table gt  to me     Try something like this    x000D   x000D  p   x000D    display  table  x000D    x000D  span   x000D    width  100px  x000D    border  1px solid silver     added for visualization only   x000D    display  table-cell  x000D    x000D   lt p gt  x000D     lt span gt  Foo  lt  span gt  x000D     lt span gt  Bar  lt  span gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

Why not something like this    a bit hacky  and depends on your code for the css units  but   my-span       position  relative      left  -1em      width  1em      lt span gt     lt  span gt  lt span class  quot my-span quot  gt  lt  span gt

User · Answer

There are lots of solutions like font-size 0 word-spacing margin-left letter-spacing and so on  Normally I prefer using letter-spacing because  it seems ok when we assign a value which is bigger than the width of extra space e g  -1em   However  it won t be okay with word-spacing and margin-left when we set bigger value like -1em  Using font-size is not convenient when we try to using em as font-size unit   So  letter-spacing seems to be the best choice  However  I have to warn you when you using letter-spacing you had better using -0 3em or -0 31em not others   x000D   x000D        margin  0    padding  0    a     text-decoration  none    color  inherit    cursor  auto     nav     width  260px    height  100px    background-color  pink    color  white    font-size  20px    letter-spacing  -1em     nav  text     width  90px    height  40px    box-sizing  border-box    border  1px solid black    line-height  40px    background-color  yellowgreen    text-align  center    display  inline-block    letter-spacing  normal    x000D   lt nav class  nav  gt       lt span class  nav  text  gt nav1 lt  span gt       lt span class  nav  text  gt nav2 lt  span gt       lt span class  nav  text  gt nav3 lt  span gt   lt  nav gt  x000D   x000D   x000D   If you are using Chrome test version 66 0 3359 139  or Opera test version 53 0 2907 99   what you see might be   If you are using Firefox 60 0 2  IE10 or Edge  what you see might be   That s interesting  So  I checked the mdn-letter-spacing and found this   length Specifies extra inter-character space in addition to the default space between characters  Values may be negative  but there may be implementation-specific limits  User agents may not further increase or decrease the inter-character space in order to justify text   It seems that this is the reason

User · Answer

Remove the spaces from inline block elements  there are so many methods    Font size to zero  nav       font-size  0    nav a       font-size  16px     Negative margin  div a       display  inline-block      margin-right  -4px     Skip the closing tag   lt ul gt       lt li gt  one      lt li gt  two      lt li gt  three  lt  ul gt   Use comments    lt ul gt       lt li gt Item 1 lt  li gt  lt  --     -- gt  lt li gt Item 2 lt  li gt  lt  --     -- gt  lt li gt Item 3 lt  li gt   lt  ul gt

User · Answer

font-size 0  can be a bit trickier to manage     I think the following couple lines is a lot better and more re-usable  and time saver than any other methods  I personally use this    inline-block-wrapper gt  inline-block-wrapper   inline-block-wrapper letter-spacing  -4px    inline-block-wrapper gt   letter-spacing  0 display  inline-block       OR better shorter name       items gt  items   items letter-spacing  -4px    items gt   letter-spacing  0 display  inline-block     Then you can use it as following      lt ul class  items  gt      lt li gt Item 1 lt  li gt      lt li gt Item 2 lt  li gt      lt li gt Item 3 lt  li gt   lt  ul gt    As far I as I know  I may be wrong  but all browsers support this method   EXPLANATION   This works  maybe -3px may be better  exactly as you would anticipate it to work    you copy and paste the code  once  then on your html just use class  items  on the parent of each inline-block    You will NOT have the need to go back to the css  and add another css rule  for your new inline blocks   Solving two issues at once   Also note the  gt   greater than sign  this means that   all children should be inline-block   http   jsfiddle net fD5u3   NOTE  I have modified to accommodate to inherit letter-spacing when a wrapper has a child wrapper

User · Answer

Generally we use elements like this in different lines  but in case of display inline-block using tags in same line will remove the space  but in a different line will not   An example with tags in a different line    x000D   x000D  p span   x000D    display  inline-block  x000D    background  red  x000D    x000D   lt p gt  x000D     lt span gt  Foo  lt  span gt  x000D     lt span gt  Bar  lt  span gt  x000D   lt  p gt  x000D   x000D   x000D    Example with tags in same line   x000D   x000D  p span   x000D    display  inline-block  x000D    background  red  x000D    x000D   lt p gt  x000D     lt span gt  Foo  lt  span gt  lt span gt  Bar  lt  span gt  x000D   lt  p gt  x000D   x000D   x000D      Another efficient method is a CSS job that is using font-size 0 to the parent element and give font-size to a child element as much as you want    x000D   x000D  p   x000D    font-size  0  x000D    x000D  p span   x000D    display  inline-block  x000D    background  red  x000D    font-size  14px  x000D    x000D   lt p gt  x000D     lt span gt  Foo  lt  span gt  x000D     lt span gt  Bar  lt  span gt  x000D   lt  p gt  x000D   x000D   x000D       The above methods may not work somewhere depending on the whole application  but the last method is a foolproof solution for this situation and can be used anywhere

User · Answer

I thought I d add something new to this question as although many of the answers currently provided are more than adequate  amp  relevant  there are some new CSS properties which can achieve a very clean output  with full support across all browsers  and little to no  hacks   This does move away from inline-block but it gives you the same results as the question asked for   These CSS properties are grid  CSS Grid is highly supported  CanIUse  apart from IE which only needs an -ms- prefix to allow for it to work   CSS Grid is also highly flexible  and takes all the good parts from table  flex  and inline-block elements and brings them into one place   When creating a grid you can specify the gaps between the rows and columns  The default gap is already set to 0px but you can change this value to whatever you like    To cut it a bit short  heres a relevant working example    x000D   x000D  body   x000D    background  lightblue  x000D    font-family  sans-serif  x000D    x000D   x000D   container   x000D    display  grid  x000D    grid-template-columns  100px 100px  x000D    grid-column-gap  0     Not needed but useful for example    x000D    grid-row-gap  0     Not needed but useful for example    x000D    x000D   x000D   box   x000D    background  red  x000D    x000D   box nth-child even    x000D    background  green  x000D    x000D   lt div class  container  gt  x000D     lt div class  box  gt  x000D      Hello x000D     lt  div gt  x000D     lt div class  box  gt  x000D      Test x000D     lt  div gt    x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I m going to expand on user5609829 s answer a little bit as I believe the other solutions here are too complicated too much work   Applying a margin-right  -4px to the inline block elements will remove the spacing and is supported by all browsers   See the updated fiddle here   For those concerned with using negative margins  try giving this a read

[html] How do I remove the space between inline/inline-block elements?

Examples related to html

Examples related to css