'Delete white space between divs

I'm getting some strange whitespace between two divs I have.

Each div has the css property display: inline-block and each have a set height and width.

I cannot find where the whitespace is.

Here is a Fiddle

csshtml


Solution 1:[1]

Use: 

float:left;
clear:none;

In both div

Solution 2:[2]

If you want to retain your coding layout, avoid floats and keep each div on it's own line entirely...

<div id="leftSide">Some content here</div><!-- --><div id="rightSide">Some more content here</div>

Solution 3:[3]

This does the trick:

<div id="left_side">
    ...
</div><div id="right_side">
    ...
</div>

Notice how the right-side div starts immediately after the closing tag of the left-side div. This works because any space between the elements, since they are now inline, would become a space in the layout itself. You can mirror this behavior with two span elements.

Demo.

Solution 4:[4]

Only add this to your CSS 

h1 {
    padding:0;
    margin:0;
   }

Space between div is only due to h1 Margin and Padding

Solution 5:[5]

You can also add display: flex; to the divs' parent container (in this case, body). Fiddle.

Solution 6:[6]

best way is settings parent element's font-size to 0 then normal font-size to child elements inside that parent (otherwise inherits zero from parent)

Solution 7:[7]

Floated both of the elements left, also made the 30% width into 40% to fill all the space, but this isn't necessary. Please be aware, "inline-block" isn't supported by IE7 but can be fixed with a workaround.

http://jsfiddle.net/RVAQp/3/

Solution 8:[8]

Move these statements onto the same line:

</div><div id="right_side">

Solution 9:[9]

Tried using float instead of "inline-block", no problems. Just changed the display:inline-block to:

#left_side {float: left;}

and

#right_side {float: right; margin-right: 10%}

No apparent problems. Could be wrong.

Solution 10:[10]

Don't know why but I resolved this problem by adding border: 1px solid red;(vertical) and float: left;(horizontal) to related DIV style statement and white-spaces removed.

Solution 11:[11]

Parent div set to font-size: 0px and chiilds to wanted size like 17px :)

Related Questions