<td> 下面不需要的巨大空间答案

【问题标题】：Unwanted Huge Space below <td><td> 下面不需要的巨大空间
【发布时间】：2015-05-11 04:42:26
【问题描述】：

我正在制作一本电子书，<figure> 和 <figcaption> 在 Sigil 中被渲染为未知标签，所以我使用 <table> 作为图像和标题，但它留下了一个巨大的空白，如下图所示。

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

【问题讨论】：

假设图像底部没有多余的空间，因为您使用的是表格而不是 div，请尝试添加高度修饰符来捕捉高度，例如
并将其放入标签中。 ...或者你可以添加 height:0px;进入你的风格标签。
您可以发布您的链接或创建小提琴以更好地理解您的问题吗？

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

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

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