我在一個表格單元格中插入了一張圖片，我想讓行高與圖片的高度完全相同。 現在，影像和行底邊框之間似乎有一點間隙。 有什么方法可以消除這個問題嗎？
<html>
<head>
<title>TODO提供一個標題</title>
<meta charset="UTF-8">/span>
<meta name="viewport" content="width=device width, initial-scale=1. 0">
<style>
table {
border : 2px solid brown;
border-collapse: collapse;
padding : 0px;
}
tr {
border : 1px dotted darksalmon ;
height : auto;
}
img {
width : 25px;
height: 25px;
border : 1px solid red; }
</style>>
</head>
<body>
<div>TODO寫內容</div>/span>
<table style="height: 0;">/span>
<tr>
<td>/span>
單元格1
</td>單元格1
<td>單元格 1
單元格1
</td>單元格1
</tr>/span>
<tr style="height: 0;">
<td>
單元格1
</td>單元格1
<td>
<img alt ="" src="APPROVED. jpg"/>
</td>/span>
</tr>/span>
<tr>/span>
<td>
單元格1
</td>單元格1
<td>單元格 1
單元格1
</td>單元格1
</tr>/span>
</table>/span>
</body>
輸出
uj5u.com熱心網友回復：
嘗試使用padding: 0為td當你的影像放置時。
uj5u.com熱心網友回復：
你可以使用給padding值0
如果還是不行，就不要使用硬編碼
。uj5u.com熱心網友回復：
在包含img的td上使用了flex屬性，使影像覆寫了容器的高度，并添加了一個padding: 0;到該類，以消除任何額外的空間
<html>
<head>
<title>TODO提供一個標題</title>
<meta charset="UTF-8">/span>
<meta name="viewport" content="width=device width, initial-scale=1. 0">
<style>
table {
border: 2px solid brown;
border-collapse: collapse;
padding: 0px;
}
tr {
border: 1px dotted darksalmon;
height: auto;
}
img {
width: 25px;
height: 25px;
border: 1px solid red;
}
.cover {
display: flex;
padding:0;
}
</style>>
</head>
<body>
<div>TODO寫內容</div>/span>
<table style="height: 0;">/span>
<tr>
<td>/span>
單元格1
</td>單元格1
<td>單元格 1
單元格1
</td>單元格1
</tr>/span>
<tr style="height: 0;">
<td>
單元格1
</td>單元格1
<td class="cover">
<img alt=""/span> src="https://www. hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" />。
</td>/span>
</tr>/span>
<tr>/span>
<td>
單元格1
</td>單元格1
<td>單元格 1
單元格1
</td>單元格1
</tr>/span>
</table>/span>
</body>
</html>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/331868.html
標籤：
上一篇：相同的測驗案例顯示不同的答案
下一篇：在CSS中，文本不會在影像下對齊