Fatal编程技术网
  • html/
  • Html 多余边距

Html 多余边距

html css

Html 多余边距,html,css,Html,Css,我得到了2倍多余的边距/填充/边框，但我一辈子都看不出是什么原因造成的。在FF47和O36.0.2130.80中的结果都是相同的 头部、身体、桌子、T身体、TR、TH、TD、DIV{ 填充：0； 保证金：0； 边界：0； } 身体{ 背景色：#555577； 颜色：#中交； 字体系列：“Verdana”、“Arial”、“Helvetica”； 字号：9pt； 文字装饰：无； 边界：0； 填充：0； 保证金：自动； } 福 添加 坐到桌子上 <!DOCTYPE HTML PUB

我得到了2倍多余的边距/填充/边框，但我一辈子都看不出是什么原因造成的。在FF47和O36.0.2130.80中的结果都是相同的


头部、身体、桌子、T身体、TR、TH、TD、DIV{
填充：0；
保证金：0；
边界：0；
}
身体{
背景色：#555577；
颜色：#中交；
字体系列：“Verdana”、“Arial”、“Helvetica”；
字号：9pt；
文字装饰：无；
边界：0；
填充：0；
保证金：自动；
}
福
添加

坐到桌子上

    <!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>


头部、身体、桌子、T身体、TR、TH、TD、DIV{
填充：0；
保证金：0；
边界：0；
边界间距：0px；
}
身体{
背景色：#555577；
颜色：#中交；
字体系列：“Verdana”、“Arial”、“Helvetica”；
字号：9pt；
文字装饰：无；
边界：0；
填充：0；
保证金：自动；
}
福

添加

坐到桌子上

    <!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>


头部、身体、桌子、T身体、TR、TH、TD、DIV{
填充：0；
保证金：0；
边界：0；
边界间距：0px；
}
身体{
背景色：#555577；
颜色：#中交；
字体系列：“Verdana”、“Arial”、“Helvetica”；
字号：9pt；
文字装饰：无；
边界：0；
填充：0；
保证金：自动；
}
福

您可以使用div而不是tables来更清晰、更专业地设定目标：

正文{
背景色：#555577；
}
#进步包含{
边缘顶部：50px；
宽度：400px；
高度：30px；
背景色：#fff；
}
#进度条{
背景色：#780000；
字体：400 9pt/1“Verdana”、“Arial”、“Helvetica”；
宽度：50%；
颜色：#fff；
填充顶部：8px；
左侧填充：6px；
框大小：边框框；
身高：100%；
}

福
您可以使用div而不是表格来更清晰、更专业地制定目标：

正文{
背景色：#555577；
}
#进步包含{
边缘顶部：50px；
宽度：400px；
高度：30px；
背景色：#fff；
}
#进度条{
背景色：#780000；
字体：400 9pt/1“Verdana”、“Arial”、“Helvetica”；
宽度：50%；
颜色：#fff；
填充顶部：8px；
左侧填充：6px；
框大小：边框框；
身高：100%；
}

福
将“边框折叠：折叠”添加到表格元素中，您可以在此处看到一张图片：

将“边框折叠：折叠”添加到表格元素中，您可以在此处看到一张图片：

你能添加一个能产生预期效果的图像吗？Oeff，表中的一个表。。。。的确如此1999@LinkinTED我认为，在某些情况下，这仍然是有意义的。HTML电子邮件，例如.JSFiddle就可以了this@xzegga. 我不明白。如果你的意思是显示我想要的图像，只要想象一下边缘没有额外的2个像素的当前图像。你能添加一个达到预期效果的图像吗？Oeff，表中的一个表。。。。的确如此1999@LinkinTED我认为，在某些情况下，这仍然是有意义的。HTML电子邮件，例如.JSFiddle就可以了this@xzegga. 我不明白。如果你的意思是显示我想要的图像，想象一下当前图像边缘没有额外的2个像素。是的，但我是老派，更喜欢桌子。页面在渲染时不会来回移动。是的，但我是个老古董，更喜欢桌子。页面在渲染时不会来回移动。我很感激你的解决方案，杰克，但已经选择了阿尔莫的。坦率地说，由于没有涉及边界，我真的不明白边界塌陷或边界间距是如何工作的。某处有东西坏了。我很感激你的解决方案，杰克，但已经选了阿尔莫。坦率地说，由于没有涉及边界，我真的不明白边界塌陷或边界间距是如何工作的。某处有东西坏了。 
    <!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>