Unwanted Huge Space below

Question

I'm making an e-book and <figure> & <figcaption> are being rendered as unknown tag in Sigil, so I used <table> for image and caption but it leaves a huge gap like in the picture below.

HTML

<table class="imgtable" style="border: 1px solid black;">
<tr>
  <td class="imgs" style="border: 1px solid black;"><img alt="2b - 69" src="../Images/2b_-_69.jpg" width="100%" /></td>
</tr>

<tr>
  <td class="caption">A 1795 photograph of some stalwarts under the famous banyan tree “…all sentiment…” and a mute witness to the growth of cricket in Calcutta.</td>
</tr>

CSS

    table.imgtable {
  width: 100% !important;
  margin-left: "auto" !important;
  margin-right: "auto" !important;
  text-align: "center" !important;
}
table.imgtable td.caption {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-right: 3px solid #262626 !important;
  border-top: 1px solid #262626 !important;
  border-bottom: 3px solid #262626 !important;
  border-left: 1px solid #262626 !important;
  font-family: "EB Garamond 08" !important;
  text-align: center !important;
  font-size: 80% !important;
  background-color: white !important;
  border-radius: 3px !important;
  width:"auto" !important;  
}
table.imgtable td.imgs {
  padding-top: 7px !important;
  padding-bottom: 0 !important;
  width:100%;
}
img {
  width: "auto" !important;
}

enter image description here

Assuming that image doesn't have extra space at the bottom of it, since you're using tables instead of divs, try adding a height modifier to snap the height up, like
and put the same into the tag. ...alternately you can add height:0px; into your style tag. — joshstrike, May 11 '15 at 04:48
Can you post your link or create fiddle for better understanding your issue? — ketan, May 11 '15 at 04:57

AleshaOleg · Answer 1 · 2015-05-11T04:52:17.097

Use border-spacing, set it to 0 for table.

Here is JSFiddle.

HTML

<table class="imgtable" style="border: 1px solid black;">
<tbody>
    <tr>
      <td class="imgs" style="border: 1px solid black;">
          <img alt="2b - 69" src="../Images/2b_-_69.jpg" width="100%" />
        </td>
    </tr>
    <tr>
      <td class="caption">A 1795 photograph of some stalwarts under the famous banyan tree “…all sentiment…” and a mute witness to the growth of cricket in Calcutta.</td>
    </tr
</table>

CSS

table.imgtable {
    border-spacing: 0;
    width: 100% !important;
    margin-left: "auto" !important;
    margin-right: "auto" !important;
    text-align: "center" !important;
}

table.imgtable td.caption {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    padding-left: 1opx !important;
    padding-right: 10px !important;
    border-right: 3px solid #262626 !important;
    border-top: 1px solid #262626 !important;
    border-bottom: 3px solid #262626 !important;
    border-left: 1px solid #262626 !important;
    font-family: "EB Garamond 08" !important;
    text-align: center !important;
    font-size: 80% !important;
    background-color: white !important;
    border-radius: 3px !important;
    width:"auto" !important;  
}

table.imgtable td.imgs {
    padding-top: 7px !important;
    padding-bottom: 0 !important;
    width:100%;
}

img {
    width: "auto" !important;
}

score 0 · Answer 2 · answered May 11 '15 at 05:02

0

Use 'block' function in CSS rather than using 'td' in html.

answered May 11 '15 at 05:02

ALFA

1
2

score 0 · Answer 3 · answered May 11 '15 at 05:45

Don't use a table and avoid !important (http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/)

.figure {
    border-spacing: 0;
    width: 100%;
    margin-left: "auto";
    margin-right: "auto";
    text-align: "center";
}

.figure .caption {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 10px;
    padding-right: 10px;
    border-right: 3px solid #262626;
    border-top: 1px solid #262626;
    border-bottom: 3px solid #262626;
    border-left: 1px solid #262626;
    font-family: "EB Garamond 08";
    text-align: center;
    font-size: 80% ;
    background-color: white;
    border-radius: 3px;
    width:"auto"; 
    margin-top:5px; /*Adjust this as desired*/
}

.figure img {
    padding-top: 7px;
    padding-bottom: 0;
    width:100%;
    display:block;
}

<div class="figure">
  <img src="http://placehold.it/500x500" >
  <div class="caption">A 1795 photograph of some stalwarts under the famous banyan tree “…all sentiment…” and a mute witness to the growth of cricket in Calcutta.</div>
</div>

Unwanted Huge Space below

3 Answers3

Linked