The cell table inside the div has an extra top pad

I have a parent div named "box", and inside it there is a child div, "innerbox". innerboox contains text and a quotation mark icon in the upper left corner. However, there is an extra line / spacing at the top of the inner div block, and I don't know how to get rid of it. I tried border collapse, vertical alignment and line height 0, but still to no avail. Any ideas?

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>

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

The image file is available here: http://gabrieltomescu.com/quote-mark-sm.png

Thank!

+3
source share
2 answers

A new line is launched when it is closed by a tag.

, quote-mark-sm.png, , . , "" , div? ( )

0

div float: .

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

Source: https://habr.com/ru/post/1785134/


All Articles