5

There are spaces rendered between <div>s as shown on this website. I've set margins, padding, borders to zero, but didn't do the trick. Are there any ways to get rid of those spacings?

Here is the code (the red border is purely for demonstration and will be removed if the problem get fixed):

<style type="text/css">
    body{margin: 0 auto;}
    #content{text-align:center; float:center; white-space:nowrap;}
    .content-left{width:200px; display: inline-block; border:1px solid red; vertical-align:top;}
    .content-center{width:950px; display: inline-block; border:1px solid red; vertical-align:top;}
    .content-right{width:300px; display: inline-block; border:1px solid red; vertical-align:top;}
</style>

<div id="content">
    <div class="content-left"><img src="images/imglft.jpg" /></div>
    <div class="content-center">
     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="950" height="1000" id="index" align="middle">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="movie" value="index.swf" />
            <param name="menu" value="false" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#000000" />
            <embed src="index.swf" menu="false" quality="high" bgcolor="#000000" width="950" height="1000" name="index" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
        </object>
    </div>
    <div class="content-right"><img src="images/imgrt.jpg" /></div>
</div>
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Christian Luneborg
  • 493
  • 7
  • 19
  • Related: http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-div-elements/19038859#19038859 – Josh Crozier Sep 02 '14 at 03:38

3 Answers3

3

The display: inline-block; is causing that. This way the <div>s behave as if they're inline text. If you remove whitespace between </div> and <div>, then the problem disappears, like as with normal text.

Rather use float: left; instead if all you want is to float them left.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
3

Try use font-size: 0; on parent #content and then return it to your font size on children like font-size: 12px; ...

Or: use word-spacing: -.43em; on parent and return it to word-spacing: 0em; on children ...

I tested that, and seemed it will work.

Al-Mothafar
  • 7,949
  • 7
  • 68
  • 102
2

As BalusC stated: "The display: inline-block; is causing that. The divs behave as if they're inline text."
This is absolutely correct.

Issue

This is caused by the newline char between your <div>-elements.
See sample: http://jsfiddle.net/yZQNf/1/

Sample code

HTML

<div id="wrapper">
    <div class="inline">123</div>
    <div class="inline">456</div>
</div>

<br />

<div id="wrapper">
    <!-- No newline between divs -->
    <div class="inline">123</div><div class="inline">456</div>
</div>

CSS

#wrapper {
    border: 1px solid red;
}

.inline {
    border: 1px solid blue;
    display: inline-block;
}
Community
  • 1
  • 1
Smamatti
  • 3,901
  • 3
  • 32
  • 43
  • Thank you. But why are you repeating an already given answer? Just upvote and/or leave a comment if you agree with the answer. – BalusC Nov 12 '11 at 14:42
  • @BalusC I am explaining the issue further and showing a way to fix the issue without using `float`. -- Whitespace having an impact on the layout is bad, but at least it's possible to work with this isuue if you are not able to use float for some reason. – Smamatti Nov 12 '11 at 14:44
  • Oh sorry, your initial answer existed of only a single sentence repeating my answer. You edited the rest in afterwards. Nevermind me :) – BalusC Nov 12 '11 at 14:45