0

How to remove line in middle of two div's?

HTML:

<body>
    <div id='container'>
        <div id='lolol'></div>
        <div id='lol'></div>
    </div>
</body>

CSS:

#lolol {
    height: 200px;
    width: 200px;
    display: inline-block;
    vertical-align: top;
    background-color: green;
    }
#lol {
    height: 200px;
    width: 200px;
    display: inline-block;
    vertical-align: top;
    background-color: blue;
    }
#container {
    width: 500px;
    height: 500px;
}
hungerstar
  • 21,206
  • 6
  • 50
  • 59
Danyil
  • 53
  • 7
  • 1
    https://jsfiddle.net/daniladyabin/fy3yhx4f/ – Danyil Dec 20 '15 at 22:45
  • 3
    See: [Why is there an unexplainable gap between these inline-block div elements?](http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements/19038859#19038859) – Josh Crozier Dec 20 '15 at 22:46
  • 1
    I vote to close, this has been answered by @JoshCrozier. – hungerstar Dec 20 '15 at 22:51

4 Answers4

1

This often happens when one uses inline-block <div>s, and most of the time it's due to the fact that the code formatting somehow created a space character between the blocks. You just try to erase anything in the HTML that's between your two blocks.

edited Fiddle: https://jsfiddle.net/u3w0ewc5/

Johannes
  • 64,305
  • 18
  • 73
  • 130
0

Maybe you can set font-size: 0; of the parent <div id='container'>

For example:

#container {
    width: 500px;
    height: 500px;
    font-size: 0;
}

https://jsfiddle.net/fy3yhx4f/3/

The fourth bird
  • 154,723
  • 16
  • 55
  • 70
0

I looked up the solution online and apparently closing part of your tag on the next line will fix this

 <div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>
BlackFedora778
  • 49
  • 1
  • 10
0

Here is the fiddle I did: https://jsfiddle.net/benF/fy3yhx4f/5/

What I did is on you #lol element I did float:left

and the gap went away so check it out at the link I gave You

The Beast
  • 1
  • 1
  • 2
  • 24