html - 无法弄清楚填充问题

标签 html css padding html-email

我似乎无法弄清楚页面顶部的 1 或 2 个像素的填充是从哪里来的。我已经在 Chrome 和 Safari 中运行过它,但 JSFiddle 似乎没有生成它。

这可能只是浏览器将其打印到页面的方式吗?如果是这样,有没有办法在 CSS 或 JS 中抵消这种影响?

这是 JS Fiddle 示例:

My JSFiddle Example

这里是你觉得容易的代码

<html>
<head>


<style>
* {padding:0; margin:0;}

h1{font-family: Arial, Helvetica, sans-serif; font-size:36px;}
h2{font-family: Arial, Helvetica, sans-serif; font-size:28px;}
h3{font-family: Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal;}
h4{font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; line-height:16px;}
h5{font-family: Arial, Helvetica, sans-serif; font-size:9px;}

span{margin:0 auto;}

#wrapper{
    width:800px;
    height:auto;
    margin:0 auto;
}

#wrapper .header{
    background-image: url('http://i.imgur.com/dY8Tuu5.png');
    background-repeat: no-repeat;
}

#wrapper .header span h1{
    position:relative; 
    top:65px; 
    left:35px;
}

#wrapper .header span h2{
    position:relative;
    color:white;
    text-shadow:1px 1px 1px #333; 
    top:115px; 
    left:25px;
}

</style>

</head>

<body>

<table id="wrapper">
    <tr>
        <td class="header" height="450" >
            <span>
                <h1>Big Flashy <br /> Headlines Here</h1>
            </span>

            <span>
                <h2>Sub-Headers and such <br /> can go Here</h2>
            </span>
        </td>


    </tr>    
</table>


</body>
</html>

我必须使用表格而不是 DIV,因为它将通过电子邮件发送。

谢谢

最佳答案

在 Chrome 上,问题是用户代理样式表为 border-spacing 添加了 2px 到 table。尝试:

table {border-spacing: 0px;}

关于html - 无法弄清楚填充问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14689368/

相关文章:

css - 编写 Sass 函数的正确方法是什么?

javascript - Quora 在 Jquery Mobile 中样式化了 "add content"图标

html - <div> 内边距影响 <p> 边距

javascript - 为什么我的 SVG 图像在 chrome 上显示完美,但当我在 iPhone 上打开它时却根本不显示?

html - 网页上的所有链接都应该加下划线吗?

html - 当我缩放浏览器时如何使图像保持其大小

html - 我怎样才能改进这个移动网站?

html - Safari 忽略宽度 :0 on anchor element

c++ - 读取和写入结构的填充位

javascript - 填充半径是否有属性或解决方法?