div 内的表格单元格有额外的顶部填充

Question

我有一个名为“box”的父 div，其中有一个子 div，“innerbox”。 innerboox 在左上角保存文本和引号图标。但是，innerbox div 的顶部有一个额外的行/间距，我不知道如何摆脱它。我尝试过边框折叠、垂直对齐底部和行高 0，但仍然无济于事。有什么想法吗？

风格

<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>

还有 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>

图片文件在这里：http://gabrieltomescu.com/quote-mark-sm.png

谢谢！

Answer 1

当它被标签关闭时开始一个新行。

不确定 quote-mark-sm.png 是什么样的，但我猜还有其他方法可以将其放置在您的框中。您是否考虑过将其作为“box”的背景图像而不是在单独的 div 中使用？ （并适当定位）

Answer 2

将 span 更改为 div 并添加 float: left 对我有用。

<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>