I can’t get one div stuck on the other

Question

I want to put the 3 divs on the same line with width: 33.3333%, but a space is appearing between them. Note in the image that the padding, margin and borda are zero, and I have declared box-sizing:border-box in the reset.

html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed, 
            figure, figcaption, footer, header, hgroup, 
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
                    margin: 0;
                    padding: 0;
                    border: 0;
                    font-size: 100%;
                    font: inherit;
                    vertical-align: baseline;
                    box-sizing: border-box;
            }

I don’t know where this came from if the browser itself says nothing by the element inspector. Does anyone know how I can remove this?

Answer 1

Look, as already said display inline-block has a spacing that even zeroing all the margins still continues with spaces.

How can I solve this with the elements still being inline-block? Simple. just reset the font-size: 0 of the parent element. makes sense? I don’t know but so solves, follows example:

*{
  box-sizing:border-box
}

nav{
  font-size: 0;
}

nav a {
  display: inline-block;
  background: #ddd;
  padding: 10px;
  font-size: 15px;
  width: 33.333%;
  border: 1px solid #333;
}

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

In my example the parent element is the tag nav, but there is another way to solve this, look at the example:

*{
  box-sizing:border-box
}

nav a {
  display: inline-block;
  background: #ddd;
  padding: 10px;
  font-size: 15px;
  width: 33.333%;
  border: 1px solid #333;
}

<nav>
  <a href="#">One</a
  ><a href="#">Two</a
  ><a href="#">Three</a>
</nav>

Note that now I will not zero the font-size of the parent element, but the character > from the closing of each jump tag and soon started the next tag...

what happened was to leave almost everything in the same line, and observing this behavior it is clear that that space in the elements inline-block is caused by the line breaking in the code, makes no sense but beauty

Answer 2

Elements inline-block by default have spaces, this is some kind convention, do not know for sure, to remove these spaces just set a margin negative, example

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
  margin-right: -4px;
}

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

By the way, your solution is the best possible, display flex, or better flexbox is for me the best way to behave the elements in the layout, follows the complete guide Flexbox css Tricks

Answer 3

I put display:flex; in father div and solved my problem. Thanks! But if still cuff can explain me this question will be good to know. This left me with "a flea behind my ear". I think the div should stand next to each other once I zeroed everything and asked display:inline-block; and width:33.3333%;.