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

Asked

Viewed 3,528 times

1

I lined up two divs side by side, but there was a space in the middle of them, like removing?

#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>

html css

3 answers

3


You can solve this with a gambit:

#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 ident the code we leave some blank spaces, the property inline-block will place this space between the elements.

For example, if I take your code without any change and put it inlinein 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>

Then if there is space the browser inputa the element a standard font size, as it has no character other than the space character, it is this default size, and assigning 0 the font it gets the size 0..Dhããrrrrrr

There are other ways to solve this. See some

  • Thanks man, it worked perfectly! Just a question, why did it solve my problem? hahaha

  • I edited it, see if I’m... VLW @Juanlima

  • It was great, I understood. Another question: depending on how I render the window, the images are very small and cool. Do you know any way to keep them the same size and glued together? Thanks in advance

  • Maybe setting the size on height e width...

1

The problem is that you have space between the elements: a line break. If you take the html it has and compress, the problem will already 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 visualize. 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, don’t close the tag on the same line. For example:

<div> ... </div
><div> ...</div>
  • 1

    +1 I didn’t know that this spacing could interfere with the display of the elements. Interesting.

0

it would be good for you to use some reset or create your own before you start styling your search pages about reset css.. 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;
}

  • Could you explain what this has to do with the question?

  • By default browsers already come with some css patterns.. if you do not change them they may cause some unwanted spacings as in the case.. and other small problems.. as I said research on reset css...

  • And did you come to test whether it solves the problem? I tested here its solution and did not present differences.

  • I just indicated a possible solution and I indicated at the same time to study the subject, because the reset can avoid several unwanted spacings "as in the case" and if it does not use one in your project will surely have gender problems.

  • @Drik I got into the same question Anderson was asked about the fact that my test was the same way the question is.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.