CODEWITHSUNDEEP
htmlcss
Christian Luneborg
Christian Luneborg

Reputation: 511

How to get rid of spaces between images in CSS?

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>

Upvotes: 5

Views: 3761

Answers (3)

Al-Mothafar
Al-Mothafar

Reputation: 8219

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.

Upvotes: 3

Smamatti
Smamatti

Reputation: 3931

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;
}

Upvotes: 3

BalusC
BalusC

Reputation: 1108732

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.

Upvotes: 3

Related Questions