表格行和表格單元格組合問題，關閉 1 個像素

Question

我試圖將一個圖標和一個文本放在一起，這樣圖標在左側，文本在右側，並且兩者都可以自動垂直設置在中間。

我注意到一些問題，元素的框出於某種原因關閉了1 個像素，這意味着它上面的文本沒有對齊。 我不知道為什么，我試圖改變很多東西，但還沒有找到任何東西。

這是一個更好的版本：

這是小提琴： https : //jsfiddle.net/Ljzmu24q/

 body { color: black; font-family: sans-serif; } body #pageWrapper { margin-right: 10px; } /* == Content == */ div#content { border: 0; } /* ============== Main ============== */ /* == Default Tables == */ table.wikitable > tr > th, table.wikitable > * > tr > th { background: rgba(181, 181, 181, 0.27); border: 1px solid #676767; color: white; text-align: center; } table.jquery-tablesorter th.headerSort { background-image: linear-gradient(#079993,#0f5182); background-position: right right; padding-right: 21px; } th { background: #1f1f1f; color: #ffffff; font-weight: bold; font-size: 116%; padding: 1px 7px; text-align: left; } tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } table.wikitable > tr > td, table.wikitable > * > tr > td { border: 1px solid #676767; padding: 0.2em; } table.diff, td.diff-otitle, td.diff-ntitle { background-color: rgba(171, 171, 171, 0.28); } .grid td { border: #5d5d5d 2px solid; } /* == CSS Class templates */ .colorinvert { filter: invert(1); } /* ============== Wiki Templates ============== */ .infobox, .infoboxtable { background: #292929; font-size: 90%; color: white; float: right; margin: 0px 0px 5px 0px; padding: 3px 4px; border: 2px solid; border-color: #4a4a4a; border-radius: 2px; width: 300px; } .infoboxtable th.infoboxname { font-size: 1.5em; } .infobox td, .infoboxtable td { position: relative; vertical-align: top; } .infoboxtable td.td_box { border: none; background: #1f1f1f; color: #ffffff; font-weight: bold; padding: 1px 7px; text-align: right; } .infoboxtable td.td_box div.icontextbox { display: table-row; height: inherit; } .infoboxtable td.td_box div.icontextbox .image, .infoboxtable td.td_box div.icontextbox .label { display: table-cell; vertical-align: middle; } .infoboxtable td.td_box div.icontextbox .label { text-align: right; width: 100%; } /*.infoboxtable td .iconlabel { vertical-align: top; float: left; }*/ .infobox td.infoboxlabel { background: rgba(0,0,0,0) linear-gradient(#079993,#0f5182); border: none; border-radius: 7px; color: #f2f2f2; padding: 1px 7px; text-align: right; vertical-align: top; } .infobox th.infoboxname { background: rgba(0,0,0,0) linear-gradient(#079993,#0f5182); border: none; color: #f2f2f2; font-size: 133%; font-weight: bold; padding: 8px; text-align: center; } .infoboxtable th.infoboxname { text-align: center; } .infoboxdetails { color: #ffffff; font-size: 110%; padding: 0em; text-align: center; }

 <table class="infoboxtable"> <tbody><tr> <th colspan="2" class="infoboxname">Road sign </th></tr> <tr> <td colspan="2" style="text-align:center;"><a href="/File:Road_Signs.png" class="image" title="Road sign"><img alt="Road sign" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/d8/Road_Signs.png/180px-Road_Signs.png?version=076b82bec5aabff34dd511d366b3c1db" decoding="async" width="180" height="180" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/d8/Road_Signs.png/270px-Road_Signs.png?version=076b82bec5aabff34dd511d366b3c1db 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/d8/Road_Signs.png/360px-Road_Signs.png?version=076b82bec5aabff34dd511d366b3c1db 2x"></a> </td></tr> <tr> <th colspan="2" class="infoboxdetails">Description </th></tr> <tr> <td colspan="2" style="text-align:center;">Some road signs made of metal. </td></tr> <tr> <th colspan="2" class="infoboxdetails">General </th></tr> <tr> <td class="td_box" style="width:50%"><div>Stack Size</div> </td> <td>3 </td></tr> <tr> <th colspan="2" class="infoboxdetails">Crafting </th></tr> <tr> <td class="td_box" style="width:50%"><div class="icontextbox"><div class="image"><img alt="Icon stopwatch.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/d5/Icon_stopwatch.png/30px-Icon_stopwatch.png?version=7a97f683c6f6dd2df8718d36902e2bd8" decoding="async" width="30" height="30" class="iconlabel colorinvert" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/d5/Icon_stopwatch.png/45px-Icon_stopwatch.png?version=7a97f683c6f6dd2df8718d36902e2bd8 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/d5/Icon_stopwatch.png/60px-Icon_stopwatch.png?version=7a97f683c6f6dd2df8718d36902e2bd8 2x"></div><div class="label"><div>Time to Craft</div></div></div> </td> <td>1.0 </td></tr> <tr> <th colspan="2" class="infoboxdetails">Ingredients </th></tr> <tr> <td colspan="2"><div style="display: inline-block;padding:1px;"><div style="position: absolute;"><a href="/Beancan_Grenade" title="Beancan Grenade"><img alt="Beancan Grenade.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/dd/Beancan_Grenade.png/50px-Beancan_Grenade.png?version=dbae46eefec6d26698b562e8f5cb1c74" decoding="async" width="50" height="50" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/dd/Beancan_Grenade.png/75px-Beancan_Grenade.png?version=dbae46eefec6d26698b562e8f5cb1c74 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/dd/Beancan_Grenade.png/100px-Beancan_Grenade.png?version=dbae46eefec6d26698b562e8f5cb1c74 2x"></a><span style="position:absolute; width:50px; height:50px; top:0; left: 0; z-index: 1;"><a href="/Beancan_Grenade" title="Beancan Grenade"><img alt="Beancan Grenade.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/dd/Beancan_Grenade.png/50px-Beancan_Grenade.png?version=dbae46eefec6d26698b562e8f5cb1c74" decoding="async" width="50" height="50" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/dd/Beancan_Grenade.png/75px-Beancan_Grenade.png?version=dbae46eefec6d26698b562e8f5cb1c74 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/dd/Beancan_Grenade.png/100px-Beancan_Grenade.png?version=dbae46eefec6d26698b562e8f5cb1c74 2x"></a></span></div> <div style="display: table; height: 50px; width: 50px; overflow: hidden; line-height: normal;"> <div style="position: relative; bottom:2%; display: table-cell; vertical-align: bottom;"> <div style="position: relative; text-align: right; width: 98%; font-size: 11px; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; color: white; text-shadow: -1px 0 0.2em black, 0 1px 0.2em black, 1px 0 0.2em black, 0 -1px 0.2em black; z-index:99999;">x4</div> </div> </div> </div> <div style="display: inline-block;padding:1px;"><div style="position: absolute;"><a href="/Small_Stash" title="Small Stash"><img alt="Small Stash.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/a/a8/Small_Stash.png/50px-Small_Stash.png?version=5927ae4d0b327eea50f216a4882757be" decoding="async" width="50" height="50" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/a/a8/Small_Stash.png/75px-Small_Stash.png?version=5927ae4d0b327eea50f216a4882757be 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/a/a8/Small_Stash.png/100px-Small_Stash.png?version=5927ae4d0b327eea50f216a4882757be 2x"></a><span style="position:absolute; width:50px; height:50px; top:0; left: 0; z-index: 1;"><a href="/Small_Stash" title="Small Stash"><img alt="Small Stash.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/a/a8/Small_Stash.png/50px-Small_Stash.png?version=5927ae4d0b327eea50f216a4882757be" decoding="async" width="50" height="50" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/a/a8/Small_Stash.png/75px-Small_Stash.png?version=5927ae4d0b327eea50f216a4882757be 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/a/a8/Small_Stash.png/100px-Small_Stash.png?version=5927ae4d0b327eea50f216a4882757be 2x"></a></span></div> <div style="display: table; height: 50px; width: 50px; overflow: hidden; line-height: normal;"> <div style="position: relative; bottom:2%; display: table-cell; vertical-align: bottom;"> <div style="position: relative; text-align: right; width: 98%; font-size: 11px; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; color: white; text-shadow: -1px 0 0.2em black, 0 1px 0.2em black, 1px 0 0.2em black, 0 -1px 0.2em black; z-index:99999;">x1</div> </div> </div> </div> <div style="display: inline-block;padding:1px;"><div style="position: absolute;"><a href="/Rope" title="Rope"><img alt="Rope.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/b/b4/Rope.png/50px-Rope.png?version=c1e469a98e537e4d5cdb9ce338d57b77" decoding="async" width="50" height="50" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/b/b4/Rope.png/75px-Rope.png?version=c1e469a98e537e4d5cdb9ce338d57b77 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/b/b4/Rope.png/100px-Rope.png?version=c1e469a98e537e4d5cdb9ce338d57b77 2x"></a><span style="position:absolute; width:50px; height:50px; top:0; left: 0; z-index: 1;"><a href="/Rope" title="Rope"><img alt="Rope.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/b/b4/Rope.png/50px-Rope.png?version=c1e469a98e537e4d5cdb9ce338d57b77" decoding="async" width="50" height="50" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/b/b4/Rope.png/75px-Rope.png?version=c1e469a98e537e4d5cdb9ce338d57b77 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/b/b4/Rope.png/100px-Rope.png?version=c1e469a98e537e4d5cdb9ce338d57b77 2x"></a></span></div> <div style="display: table; height: 50px; width: 50px; overflow: hidden; line-height: normal;"> <div style="position: relative; bottom:2%; display: table-cell; vertical-align: bottom;"> <div style="position: relative; text-align: right; width: 98%; font-size: 11px; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; color: white; text-shadow: -1px 0 0.2em black, 0 1px 0.2em black, 1px 0 0.2em black, 0 -1px 0.2em black; z-index:99999;">x1</div> </div> </div> </div> </td></tr></tbody></table>

表正在使用的類是infoboxtable ，代碼位於td.td_box

我的問題是，為什么它關閉了 1 個像素，我該如何解決？ 我還嘗試通過將“制作時間”更改為與上述相同的“堆棧大小”來比較它以更好地查看差異

Answer 1

border-spacing: 0; 在td.td_box似乎已經修復了它並且還為頂部的那個更改了它，我無法真正解釋為什么或如何真正發生，如果它在我將它嵌套在表格中時生成了額外的邊框？