How to get rid of spaces between images in CSS?


Tags: html,css

Problem :

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>


Solution :

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.


    CSS Howto..

    How to flip background image using CSS?

    How to set line spacing of an ordered list consistently across browsers?

    How do you align text of one item in nav?

    How can I size these spans so that the pictures don't extend past them?

    how to set width of a div in percentage minus certain pixels using javascript or css

    How to float: top?

    Using jquery to swap text, how to revert other text to original?

    how to fix height:auto css

    HTML/CSS: how to expand a table row i only one direction?

    CSS - How do you make text overflow out both ends of a div?

    D3js SVG open lines display a fill artifact, how to fix it?

    How to create a jQuery scroll to edit CSS?

    How to import css file for into Component .jsx file

    How to make the contents of a div not wrap?

    How to rotate image when scrolling using CSS transform?

    how to add empty space between cells in tables?

    How to detect redraw rate (fps) of a css animation?

    how to make div shadow only in belly part of box - css

    How to make a background text appear under youtube video?

    How to morph a plus sign to a minus sign using css transition?

    How to apply bootstrap css to all buttons

    how to make the navbar fixed to top

    How can I edit a web part's .css file on the fly in MOSS 2007?

    How to switch between css with jquery

    How do I selectively stack columns with twitter bootstrap

    How to create a texture paper background using CSS without image

    ckeditor - how to get custom-css with id to work?

    How to draw realistic smooth slit shadow with Pure CSS3?

    How do you align left / right a div without using float?

    Bootstrap - how to make the image being scaled down to fit the window height?