Frage Wie werden Leerzeichen zwischen Bildern in CSS beseitigt?


Es gibt Räume, zwischen denen gerendert wird <div>s wie gezeigt Diese Internetseite. Ich habe Ränder, Padding, Rahmen auf Null gesetzt, aber nicht den Trick gemacht. Gibt es Möglichkeiten, diese Abstände zu beseitigen?

Hier ist der Code (der rote Rahmen dient nur zur Demonstration und wird entfernt, wenn das Problem behoben wird):

<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
2017-11-12 14:30


Ursprung


Antworten:


Versuchen Sie es font-size: 0; auf Eltern #content und dann geben Sie es auf Ihre Schriftgröße für Kinder wie font-size: 12px; ...

Oder: benutzen word-spacing: -.43em; auf Eltern und zurück zu word-spacing: 0em; auf Kinder ...

Ich habe das getestet und es hat funktioniert.


3
2017-11-12 14:47



Das display: inline-block; verursacht das. Auf diese Weise <div>s verhalten sich so, als wären sie Inline-Text. Wenn Sie Leerzeichen zwischen löschen </div> und <div>, dann verschwindet das Problem, wie bei normalem Text.

Benutze lieber float: left; wenn Sie nur wollen, dass Sie sie nach links schweben lassen.


3
2017-11-12 14:36



Wie BalusC angegeben: "Die Anzeige: Inline-Block; verursacht das. Die Divs verhalten sich, als ob sie Inline-Text sind."
Das ist absolut richtig.

Problem

Dies wird durch den Zeilenumbruch zwischen Ihren <div>-Elemente.
Siehe Beispiel:  http://jsfiddle.net/yZQNf/1/

Beispielcode

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
2017-11-12 14:40