I can not put a div pasted on the other

Navigation
0

I want to put the 3 divs on the same line with width: 33.3333% , but a space between them is appearing. Note in the image that padding , margin and borda are zeroed, and I declare box-sizing:border-box in 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 do not know where this fence came from if the browser itself says nothing by the element inspector. Does anyone know how I can remove this?

    
asked by anonymous 05.08.2017 / 17:19

3 answers

1

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

How can I resolve this with the elements still being inline-block ? Simple. just reset% of the parent element. makes sense? I do not know but it solves it, here is an 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 font-size: 0 tag, however 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 have not cleared the nav of the parent element, but the font-size character of the closing of each tag has jumped and I have already started the next tag ...

What happened was to leave practically everything in the same line, and observing this behavior it is clear that that space in the elements > is caused by the line break in the code, it makes no sense but beauty

    
07.08.2017 / 21:00
1

elements% by default have spaces, this is some kind of convention, I'm not sure, to remove these spaces, just set a inline-block 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, margin , or better display flex is for me the best way to behave elements in the layout, follow the complete guide Flexbox css tricks

    
05.08.2017 / 17:45
0

I put display:flex; in the parent div and solved my problem. Thanks! But if you can explain it to me, it's going to be good to know. That left me with "a flea behind my ear". I think the div should stay side by side once I've cleared everything and asked display:inline-block; and width:33.3333%;

    
05.08.2017 / 17:27
Limit Result of Inner Join Total records per day in the last 30 days [duplicate]