Help, I'm confused. Where does this little white space come from?

CSS:

#wraps { width: 1840px; height: 100%; } #wraps .home_wrap { display: inline-block; background: black; width: 900px; height: 800px; } #wraps .game_wrap { display: inline-block; background: red; width: 900px; height: 800px; }

HTML:

 <div id="wraps"> <div class="home_wrap"> <button onclick="$('#wraps').animate({marginLeft: '-900px'}, 500);">TEST GO</button> </div> <div class="game_wrap"> <button onclick="$('#wraps').animate({marginLeft: '0px'}, 500);">back GO</button> </div> </div>

enter image description here

  • one
    After closing div.home_wrap, try opening the next div immediately without spaces and line breaks. - Yaroslav Molchan
  • @YaroslavMolchan turned out, thanks! Leave a comment as an answer so that I can mark it as true. - ikerya

2 answers 2

display: inline-block; - lowercase outside, block inside. Those. indent - these are problems between "lines"

Solution 1 - to place the inline-block one after another without transferring to the other lines and without spaces between them:

 <div class="home__wrap>...</div><div class="game__wrap">...</div>

Solution 2 - set .game__wrap{margin-left: -5px; } .game__wrap{margin-left: -5px; }

Additional solutions to the problem.

  • no more options? it turns out not nice if you indent, and margin-left doesn’t fit - ikerya
  • @ikerya, css-live.ru/articles/… - HamSter

this is the space between the blocks that you made inline elements