如何刪除間隙（相對位置）

-1

我想從Tab3中刪除間隙（見圖片），當我在Tab2中爲圖片設置高度（420x200）時，我發現它出現了。當我刪除高度，它看起來很正常，但我也想在Tab2上顯示圖片。那麼有沒有人有適當的解決方案來解決這個問題？如何刪除間隙（相對位置）

下面的代碼：

HTML

<table class="maindesign" align="center"> 
<tr> 
    <td width="300" ALIGN="Center" valign="top" class="bgsheet"> 
     <div class="tabhead"><span>Tab1</span></div> 


</td> 

<td width="400" valign="top" class="bgsheet"> 
<div class="tabhead"><a><span>Tab2</a></div> 
<center> 
    <div class="em"> 
     <a href="#" target="_blank"> 
     </a> 
    </div> 

    <br> 
    </td> 

</CENTER> 
<td class="bgsheet"> 
    <div class="tabhead"><a><span>Tab3</span></a></div> 

<td> 
</tr> 



</table> 

</div> 

</BODY> 
</HTML>

CSS

.maindesign { 
border-spacing:15px; 
margin-top:0px; 
} 

.bgsheet { 
background: white; 
box-shadow: 0px 0px 6px 1px #909090; 
width:450px; 
text-decoration:none; 
position: relative; 
padding: 0px; 
margin:0px; 
border-top-left-radius:25px; 
border-top-right-radius:25px; 
border: 0px solid #909090; 
} 

.tabhead { 
text-align:center; 
background: #5d9ac3; 
background: -moz-linear-gradient(top, #5d9ac3 0%, #3b6e9f 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d9ac3), color-stop(100%,#3b6e9f)); 
background: -webkit-linear-gradient(top, #5d9ac3 0%,#3b6e9f 100%); 
background: -o-linear-gradient(top, #5d9ac3 0%,#3b6e9f 100%); 
background: -ms-linear-gradient(top, #5d9ac3 0%,#3b6e9f 100%); 
background: linear-gradient(to bottom, #5d9ac3 0%,#3b6e9f 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d9ac3', endColorstr='#3b6e9f',GradientType=0); 
width: 100%; 
height: 30px; 
border-top-left-radius:20px; 
border-top-right-radius:20px; 
border: 0px solid #044062; 
border-bottom-width: 0px; 
padding-top:12px; 
padding-bottom:0px; 
box-shadow: 0px 1px 3px #383838; 
cursor: default; 
} 

.Tabkopf2 { 
text-align:center; 
background: #5d9ac3; /* Old browsers */ 
background: -moz-linear-gradient(top, #5d9ac3 0%, #3b6e9f 100%); /* FF3.6+ */ 
background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d9ac3), color-stop(100%,#3b6e9f)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #5d9ac3 0%,#3b6e9f 100%); /* Chrome10+,Safari5.1+ */ 
background:  -o-linear-gradient(top, #5d9ac3 0%,#3b6e9f 100%); /* Opera 11.10+ */ 
background:  -ms-linear-gradient(top, #5d9ac3 0%,#3b6e9f 100%); /* IE10+ */ 
background:   linear-gradient(to bottom, #5d9ac3 0%,#3b6e9f 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d9ac3', endColorstr='#3b6e9f',GradientType=0); /* IE6-9 */ 
height: 30px; 
border-top-left-radius:20px; 
border-top-right-radius:20px; 
border: 0px solid #044062; 
border-bottom-width: 0px; 
padding-top:12px; 
padding-bottom:0px; 
box-shadow: 0px 0px 5px #383838; 
cursor: default; 
} 

.em { 
    width:420px; 
    height: 200px; 
    margin: 20px auto; 
    padding: 0; 
    overflow: hidden; 
    background: url(https://placeholdit.imgix.net/~text?txtsize=39&txt=420%C3%97200&w=420&h=200) no-repeat center; 
    background-size: cover; 
}

來源

2016-06-07 Matej

d對於所討論的表格元素，使用eclare vertical-align: top。

CSS

.bgsheet { 
    background: white; 
    box-shadow: 0px 0px 6px 1px #909090; 
    width: 450px; 
    text-decoration: none; 
    position: relative; 
    padding: 0px; 
    margin: 0px; 
    border-top-left-radius: 25px; 
    border-top-right-radius: 25px; 
    border: 0px solid #909090; 
    vertical-align: top; 
}

注意<center>已被棄用，並從Web標準已被刪除。
請參閱：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

來源

2016-06-07 12:34:07 UncaughtTypeError