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

我有称为“盒子”的父级div，里面有一个子div“innerbox”。 innerboox在左上角保留文本和引号标记图标。但是，innerbox div顶部有一个额外的行/间距，我不知道如何摆脱它。我已经尝试了border-collapse，vertical-align bottom和line-height 0，但仍然无济于事。有任何想法吗？div中的表格单元格有额外的顶部填充

样式

<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

谢谢！

来源

2011-01-13 Gabriel

当它用标签关闭时，它正在开始一个新行。

不确定quote-mark-sm.png是什么样的，但我猜测还有其他的方法可以将它放在你的盒子里。你有没有考虑过把它作为“盒子”的背景图像，而不是在一个单独的div中使用它？（并适当定位）

来源

2011-01-13 07:21:59 selbie

感谢您的建议。我无法将它作为“框”的背景图像，因为这个位置是相对于文本大小的。该文本是垂直对齐的中心，所以引号也必须“跟随”它居中。那有意义吗？ – Gabriel 2011-01-13 07:26:59

quote-mark-sm.png的尺寸是多少？你能分享这个文件吗？ – selbie 2011-01-13 07:59:41

将您的跨度更改为div并添加浮点数：左侧为我工作。

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

来源

2011-01-13 07:36:00 JumpingJezza

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

回答

相关问题