How to take the space between two inline-block divs?

Navigation
1

I aligned two divs side by side, but there was a space in the middle of them, how to remove? 

#tudo {
    text-align: center;
    margin: 0 auto;
}
.desktop {
    display: block;
}
.img {
    display: inline-block;
}
<div id="tudo">
    <div class="desktop">
        <div class="img">
            <a href="https://www.google.com">
                <img src="http://placehold.it/100x100"height="100%">
            </a>
        </div>

        <div class="img">
            <a href="https://www.google.com">
                <img src="http://placehold.it/100x100"height="100%">
            </a>
        </div>
    </div>
</div>
    
asked by anonymous 19.04.2017 / 15:45

3 answers

3

You can solve this by using a gambiarra: 

#tudo{
    font-size: 0;<<-------- esta
    text-align: center;
    margin: 0 auto;
}


#tudo {
    font-size:0;
    text-align: center;
    margin: 0 auto;
}
.desktop {
    display: block;
}
.img {
    display: inline-block;
}
<div id="tudo">
    <div class="desktop">
        <div class="img">
            <a href="https://www.google.com">
                <img src="http://placehold.it/100x100"height="100%">
            </a>
        </div>

        <div class="img">
            <a href="https://www.google.com">
                <img src="http://placehold.it/100x100"height="100%">
            </a>
        </div>
    </div>
</div>

When we indent the code we leave some blanks, the inline-block property will put that space between the elements.

For example, if I get your code without any change and put it inline in the indentation it will also work, see: 

#tudo {
    text-align: center;
    margin: 0 auto;
}
.desktop {
    display: block;
}
.img {
    display: inline-block;
}
<div id="tudo"><div class="desktop"><div class="img"><a href="https://www.google.com"><img src="http://placehold.it/100x100"height="100%"></a></div><div class="img"><a href="https://www.google.com"><img src="http://placehold.it/100x100"height="100%"></a></div></div></div>

So with space, the browser tells the element a default font size, since it has no character besides the space character, it is this default size, and assigning 0 to the font it has the 0 size. Dhaããrrrr

There are other ways to resolve this. See some

    
19.04.2017 / 17:26
1

The problem is that you have space between the elements: a line break. If you get the html you own and compress, the problem will be solved: 

#tudo{text-align: center; margin: 0 auto;}.desktop{display: block;}.img{display: inline-block;}
<div id="tudo"> <div class="desktop"> <div class="img"> <a href="https://www.google.com"> <img src="http://placehold.it/100x100"height="100%"> </a> </div><div class="img"> <a href="https://www.google.com"> <img src="http://placehold.it/100x100"height="100%"> </a> </div></div></div>

But this is bad to see. So a technique can be to put a comment ( <!-- --> ) after the elements, for example: 

#tudo {
    text-align: center;
    margin: 0 auto
}
.desktop {
    display: block
}
.img {
    display: inline-block
}
<div id="tudo">
    <div class="desktop">
        <div class="img">
            <a href="https://www.google.com">
                <img src="http://placehold.it/100x100"height="100%">
            </a>
        </div><!--
        --><div class="img">
            <a href="https://www.google.com">
                <img src="http://placehold.it/100x100"height="100%">
            </a>
        </div>
    </div>
</div>

Or, do not close the tag on the same line. For example: 

<div> ... </div
><div> ...</div>
    
20.04.2017 / 17:24
0

It would be nice for you to use some reset or create your own before you start styling your pages. Search for css reset .. Ex: 

* {
margin: 0 auto;
padding: 0;
text-decoration: none;
list-style: none;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
    
19.04.2017 / 15:50
What is the difference between JAVA WEB and NetBeans JAVA EE? Get JSON result with php