Question

我得到了2px不需要的边距/填充/边框，但在我的生活中不能看到导致它的原因。它在FF47和O 36.0.2130.80

中的出现方式相同

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
   <style>
       HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
            padding:0;
            margin:0;
            border:0;
            }
       BODY    {
            background-color:#555577;
            color:#CCCCCC;
            font-family:"Verdana","Arial","Helvetica";
            font-size:9pt;
            text-decoration:none;
            border:0;
            padding:0;
            margin:auto ;
            }
    </style>
    </head>
    <body>
        <table width="400" style="background-color:white;margin:auto;padding:0;border:0">
            <tr>
                <td>
                    <table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
                        <tr>
                            <td>FOO</td>
                        </tr>
                    </table>
                </td>
           </tr>
       </table>
    </body>
</html>

Answer 1

添加

border-spacing: 0px;

到桌子上。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
   <style>
       HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
            padding:0;
            margin:0;
            border:0;
            border-spacing: 0px;
            }

       BODY    {
            background-color:#555577;
            color:#CCCCCC;
            font-family:"Verdana","Arial","Helvetica";
            font-size:9pt;
            text-decoration:none;
            border:0;
            padding:0;
            margin:auto ;
            }
    </style>
    </head>
    <body>
        <table><tr><td height="50"></td></tr></table>
        <table width="400" style="background-color:white;margin:auto;padding:0;border:0">
            <tr>
                <td>
                    <table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
                        <tr>
                            <td>FOO</td>
                        </tr>
                    </table>
                </td>
           </tr>
       </table>
    </body>
</html>

https://jsfiddle.net/

Answer 2

添加“border-collapse：collapse;”你的桌子元素，你可以在这里看到一张图片：

Answer 3

您可以使用div代替表格，让您的目标更加干净和专业：

BODY {
    background-color:#555577;
}
#progress-containes {
    margin-top: 50px; 
    width : 400px;
    height: 30px;
    background-color: #fff;
}
#progress-bar {
    background-color:#780000;
    font: 400 9pt/1 "Verdana","Arial","Helvetica";
    width: 50%;
    color: #fff;
    padding-top: 8px;
    padding-left: 6px;
    box-sizing: border-box;
    height: 100%;
}

<div id="progress-containes">
  <div id="progress-bar">
    FOO
  </div>
</div>

不必要的保证金

3 个答案: