Tabelle-Zelle innerhalb div hat extra top Polsterung

Question

Ich habe Eltern div namens "box", und darin gibt es ein Kind div, "innerbox". Innerboox enthält Text und ein Anführungszeichen in der linken oberen Ecke. Es gibt jedoch eine zusätzliche Zeile/Abstand oben im Innerbox-Div, und ich weiß nicht, wie ich es loswerden soll. Ich habe versucht, Rand-Kollaps, vertikale Ausrichtung unten und Zeilenhöhe 0, aber immer noch ohne Erfolg. Irgendwelche Ideen?

Der Style

<style> 
.quote {display:block; width: 16px; height: 11px; background: url(img/quote-mark-sm.png) no-repeat 0 0; position: relative; top: 13px; left: -20px;} 
.box {width: 350px; height: 350px; padding-left: 55px; float: left; padding-top: 140px; display: block; float:left; background: #CCC;} 
.innerbox {width: 248px; height: 72px; display: table-cell; border: 1px solid #000; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #000; text-align: left; vertical-align: middle; } 
</style> 

Und der HTML

<div class="box"><div class="innerbox"><div class="quote"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus sapien, consectetur nec malesuada a, vulputate vitae leo. Donec at urna sed odio volutpat gravida a sed felis.</div></div> 

Bilddatei finden Sie hier: http://gabrieltomescu.com/quote-mark-sm.png

Dank!

Answer 1

Das beginnt eine neue Zeile, wenn es mit dem Tag geschlossen wird.

Nicht sicher, wie quote-mark-sm.png aussieht, aber ich vermute, es gibt andere Möglichkeiten, es in Ihrer Box zu positionieren. Haben Sie darüber nachgedacht, es einfach als Hintergrundbild für "Box" zu verwenden, anstatt es in einem separaten div zu verwenden? (und es entsprechend positionieren)

Answer 2

Ändern Sie Ihre Spannweite zu einem div und Hinzufügen von float: links für mich gearbeitet.

<style type="text/css"> 
    .quote {display:block; width: 16px; height: 11px; background: url(img/quote-mark-sm.png) no-repeat 0 0; float: left;} 
    .box {width: 350px; height: 350px; padding-left: 55px; padding-top: 140px; display: block; float:left; background: #CCC;} 
    .innerbox {width: 248px; height: 72px; display: table-cell; border: 1px solid #000; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #000; text-align: left; vertical-align: middle; } 
</style> 

HTML:

<div class="box"> 
    <div class="innerbox"> 
      <div class="quote"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus sapien, consectetur nec malesuada a, vulputate vitae leo. Donec at urna sed odio volutpat gravida a sed felis. 
    </div> 
</div>