html - 3 inline-block divs with exactly 33% width not fitting in parent -

This is a common problem but I can not understand why this happens.

I have 3 devices at 33% (not at all, 33.3%!) And Display: Inline-Block on the side of the parents and within that div is.

In Chrome it works well, but in Mozilla and Opera it does not (I have not tested it in IE yet). I thought the problem algorithm could be used to calculate pixel sizing by percentage in the browser. But when I checked the DOM metric, I came to know that the width of the parents is 864 px and the child is 285 px (this is true: 864 * .33 = 285.12). But why not fit in this parent? 285 * 3 = 855, which is 9px less than the width of the parent!

Oh, yes, confirming the 0 and DOM matrix fixed for all devices of padding, margins and borders. Whitespace in source code

In HTML source code, when you have lines

Elements of text or images, or inline-block , if there are spaces (spaces, tabs, or new lines) between them, their Between a single spaces character will be added the page has been rendered. For example, in the following HTML, one of the four pieces of blank space content Will appear in between each:

  a two < Img src = "three.png" /> & Lt; Span style = "display: inline-block;" & Gt; Four & lt; Span & gt;   
 This is very useful for lines of text, and for small images or HTML elements that appear inside a line of text  
  Extra Removing location  
   
  / Strong>  
  added 4px added between inline block  elements The safest, cross-browser approach to avoiding or exceeding more space, is to remove any white space in the HTML source code between HTML tags. For example, if you have  ul  with <3 code> li  tag, then  
  & lt; - & lt; / Li & gt; There is no space, tab or line break between. And & lt; Li & gt; - & gt; & Lt; Ul & gt; & Lt; Li & gt; ... & lt; / Li & gt; & Lt; Li & gt; ... & lt; / Li & gt; & Lt; Li & gt; ... & lt; / Li & gt; & Lt; / Ul & gt;   
 Unfortunately, it affects the maintenance of the website. In addition to making the code unreadable, it seriously compromises  the separation of data and formatting .  
 If any other programmer comes later and each  li  tag is a separate line in the source code (tags tagged from unknown tags, or possibly HTML clean Going through the medium and even recording any related HTML comments), suddenly the website has a formatting bug  
  Consider floating elements instead < / Strong>  
 Strong behavior of white space It suggests that it may be inappropriate to use the  inline-block . Code> For general-layout purposes, to use it for anything other than adding content inside the flow of the text of the text  
 Plus, in some cases the  inline block  content is very difficult to style and align, especially on older browsers.  
  Quick summary of other solutions   
 
 Do not place a close tag on the same line as the next open tag, between them, in a white spot.  
 Use HTML comments to fill all the white spaces between the close tag and the next open tag (@belell suggestion).  
 Add a negative left margin in each element (usually - 3px or -4px, depending on the font size) I do not recommend this particular approach.  
 Set the  font-size  for 0 or 0.01em for the container element, it does not work in Safari 5 (not sure about later versions), and It can interfere with  responsive design  websites, or any website that uses the  font-size  unit  px .  
 Use javascript or jQuery to remove only empty space-only text nodes from the container. It does not work in IE8 and earlier, because the text nodes are not created in those browsers when there is only white space between the elements, although the space is still added between the elements.  
 Set  letter-spacing  and  wrench-spacing  (@ yellowpawels recommended). . This code needs to be standardized on the  em , which can not be the right choice for all websites.  
  Add Text-Spacing: Abandon;  The container (formerly called  white-space-collapse ) is unfortunately not supported by any browser yet, and the standard is not fully defined.