[silvanm]

Hallo zusammen

Ich habe folgendes Konstrukt:

<div class="rte_line">
  <div class="rte_content">
    <span class="rte_style">Test</span>
  </div>
</div>

Mit den CSS-rules:

.rte_line {
  position: relative;
  height: 19px;
}

.rte_content {
  height: 100%;
}

.rte_style {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  color: #42281B;
  background-color: #FFFFFF;
}

Wenn ich nun im Chrome-Debugger die einzelnen Nodes anschaue, hat die äusserste div mit der Klasse "rte_line" eine Höhe von 19px, rte_content auch noch, doch der span der Klasse "rte_style" ist nur noch 18px hoch. Wisst ihr, woher diese Differenz kommt?

Lg Silvan

[Lindheimer]

warum das so ist kann ich nicht eindeutig beantworten. aber vielleicht hilft es ja wenn du border auf 0 setzt oder das span ebenfalls auf 19px setzt:

.rte_style {
...
border: 0;
height: 19px;
}

[Stefan_der_held]

Zitat (silvanm: 27. Januar 2013 - 20:54)

Wenn ich nun im Chrome-Debugger die einzelnen Nodes anschaue, hat die äusserste div mit der Klasse "rte_line" eine Höhe von 19px, rte_content auch noch, doch der span der Klasse "rte_style" ist nur noch 18px hoch. Wisst ihr, woher diese Differenz kommt?

Lg Silvan

• Die "Mutter-DIV" hat 100%
  
• Die "Kinder-DIV" hat 100% innerhalb der 100% der Mutter.
  
• Die Mutter-DIV hat aber standardmäßig einen Rahmen von 1PX.
  
• Das "Kind" hat somit 100% - 1PX (genaugenommen sogar "-2PX" da natürlich an beiden Enden 1PX fehlen wird.

Meine Erfahrung: "Mutter-DIV"'s nicht prozentual angeben. Dann gibt es solche Kinderkrankheiten nicht (irgendwie hier eindeutig-zweideutig)

Dieser Beitrag wurde von Stefan_der_held bearbeitet: 28. Januar 2013 - 16:52

[Holger_N]

Also ich würde mal behaupten, es liegt daran, dass span ein Inline-Element ist und die Höhe in erster Linie von der Größe der Schrift abhängt, die da drin ist.
Probier doch anstatt span an der Stelle auch mal div oder versuche es mal beim span mit display:block;

Dieser Beitrag wurde von Holger_N bearbeitet: 28. Januar 2013 - 17:55

[silvanm]

Vielen Dank, ich habe mit den Antworten die Lösungen gefunden: Ich habe die Schrift auf 16px Höhe festgelegt, worauf sich der Span tatsächlich mit je 1px Rand auf 18px gestellt hat, unabhängig von meiner "height:100%"-Angabe. Somit habe ich die Höhe der äussersten divs einfach auch auf 18px angepasst.

Lg Silvan

[Witi]

Wie Holger schon geschrieben hat, die eigentliche Erklärung dafür ist, dass span ein Inline-Element ist. Bei Inline-Elementen greift eine Höhenangabe nicht (Ausnahmen wie img oder input bestätigen die Regel). Dass der span einen Pixel kleiner ist, als das umliegende div ist somit "Zufall". display:block bei einem span zu verwenden, würde ich allerdings nicht empfehlen, da es nicht semantisch ist. Da kann man direkt ein div-Element nehmen.

[Holger_N]

Was soll denn eigentlich das Ergebnis sein? Wenn das ganz äußere div ein feste Höhe hat und alle Elemente darin 100% Höhe haben und die Schrift auch eine feste Größe hat dann wirkt sich das Problem in dem Beispiel doch nur auf die Hintergrundfarbe des span-Elementes aus. Für den Rest spielt es doch keine Rolle, dass height auf span keine Wirkung hat. Wenn man da statt dem span einfach dem übergeordneten div die Hintergrundfarbe zuweist, dann müßte man doch auch haben was man will.