表格行和表格单元格组合问题，关闭 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似乎已经修复了它并且还为顶部的那个更改了它，我无法真正解释为什么或如何真正发生，如果它在我将它嵌套在表格中时生成了额外的边框？