神秘的表格行填充/邊距
[英]Mysterious Table Row Padding/Margin
問題描述
我遇到一個問題，可以在我不需要的表行上看到一些神秘的填充/邊距，但無法刪除。
請查看下面以藍色框突出顯示的區域的屏幕截圖：
代碼在這里：
https://codepen.io/mattsmith/pen/GWZNVN
我已經嘗試了很多事情，例如margin: 0 ， border-spacing: 0 ， padding: 0等。有人可以在這里幫助我嗎？ 因為我需要藍色框與圖像齊平。
1 個解決方案
解決方案1
4 已采納 2017-03-02 21:01:38
img是
一個內聯元素
“已替換內容”，它將繼承line-height ，並且您會看到line-height間距。 您可以使用line-height: 0;來修復它line-height: 0; 或font-size: 0; 在父級上，或設置display: block; 或vertical-align: top圖像vertical-align: top 。
* { font-family: Open Sans; } table { border: 1px solid #000; } th { border: 1px solid red; vertical-align: top; font-weight: normal; } p { margin: 0; } img.banner { /* or either of these */ /* display: block; */ /* vertical-align: top; */ }
<body style="padding: 50px; background: #f7faf9"> <table style="border-collapse: collapse; margin: 0 auto; margin-top: 20px; width: 100%; max-width: 800px;"> <tr> <th><img style="float: left; width: 70px" src="http://i.imgur.com/LsRs9OY.png"></th> <th><p style="text-align: right; font-size: 14px">February 14, 2017<br>Order <b>#4020</b></p></th> </tr> <tr> <th style="padding-top: 25px; line-height: 0;" colspan="2"><img style="width: 100%" class="banner" src="https://s3.amazonaws.com/zcom-media/sites/a0i0L00000QylPjQAJ/media/mediamanager/media_page_banner.jpg"></th> </tr> <tr> <th style="background: #35a0c6; padding-top: 25px;" colspan="2"></th> </tr> </table> </body>
表格行邊框問題-需要一些填充或邊距（左側和右側）
[英]table-row border issue - want some padding or margin (left and right side)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.