Divs spielen verrückt?

[Apes]

Guten Morgen zusammen,

Ich grübel schon länger über ein Phänomen bei divs das mir nicht in den Kopf will.

Wenn ich im Code divs wie folgt schreibe, habe ich nach jedem div einen kleinen "Abstand", "Platzhalter" oder "Leerzeichen"

<div class="div_1">
     <div class="div_2">Inhalt</div>
     <div class="div_3">Inhalt</div>
</div>

Wenn ich den Code aber wie folgt schreibe, habe ich dieses Phänomen nicht. Kann mir jemand sagen warum das so ist?

<div class="div_1">
     <div class="div_2">Inhalt</div><div class="div_3">Inhalt</div>
</div>

CSS

.div_1 {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 3px;
    width: 590px;
    height: 602px;
    text-align: center;
}


.div_2 {
    background-color: red;
    width: 195px;
    height: 310px;
    display: inline-block;
    vertical-align: top;
}

.div_3 {
    background-color: blue;
    width: 195px;
    height: 310px;
    display: inline-block;
    vertical-align: top;
}

 

[Waffelheld]

Ich würde mal darauf tippen das es an deinem Editor liegt,
schau dir mal den Quellcode im Browser an.

 

[Apes]

Das dachte ich auch erst, aber egal ob ich Netbeans, Bluefish, Dreamweaver oder Eclipse verwende. ich habe immer diesen doofen Abstand dazwischen.

 

[mermshaus]

display: inline-block;

Whitespace zwischen Elementen wird bei Inline-Elementen gerendert.

 

[Apes]

Guten Morgen zusammen.
Das heist auf deutsch?
Kann ich das irgendwie umgehen wenn ich divs nebeneinander haben möchte?

 

[mermshaus]

Ja, nutze keine Inline-Darstellung, sondern Block-Darstellung und Floats, oder entferne im Code den Whitespace zwischen den Tags.

 

[Apes]

hmm, okay. ich versuche es mal. Den Whitespace zu entfernen ist zwar sicherlich die einfachste Methode, aber auch die nervigste, da je nachdem was ich änder der Code automaitsch vom Joomla JCE Editor wieder umgeschubst wird. Mal gucken wie es mit Block und Floats klappt. danke

 

[Apes]

Vielen Dank, Der Tipp mit dem Floating hat perfekt funktioniert. Saubäär. ;-)