Geek Answers Handbook

How to get rid of spaces between images in CSS?

There are gaps between <div>as shown on this website . I set margins, indents, borders to zero, but didn't do the trick. Are there any ways to get rid of these distances?

Here is the code (the red frame is for demonstration purposes only and will be deleted if the problem is 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>
+5
source share
3 answers

Try using font-size: 0;in the parent #content, and then return its font size to children, such as font-size: 12px;...

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

I tested this and it seemed to work.

+3

display: inline-block;. , <div> , . </div> <div>, , ​​ .

float: left; , , , - .

+3

BalusC: ": inline-block; . , ".
.

char <div> -.
. : http://jsfiddle.net/yZQNf/1/

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

More articles:


All Articles