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中的表格單元格有額外的頂部填充

回答

相關問題