我似乎无法弄清楚页面顶部的 1 或 2 个像素的填充是从哪里来的。我已经在 Chrome 和 Safari 中运行过它,但 JSFiddle 似乎没有生成它。
这可能只是浏览器将其打印到页面的方式吗?如果是这样,有没有办法在 CSS 或 JS 中抵消这种影响?
这是 JS Fiddle 示例:
这里是你觉得容易的代码
<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/