2013-02-04 32 views
0

我似乎無法弄清楚填充的1或2像素來自我的頁面頂部。我已經在Chrome和Safari中運行了它,但它似乎沒有生成JSFiddle。無法找出填充問題

難道這只是瀏覽器打印出來的方式嗎?如果有,還有什麼方法可以對抗CSS或JS中的效果?

這裏是JS小提琴舉例:

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> 

我必須使用表,而不是資料覈實,因爲其將代碼通過電子郵件發送。

感謝

+0

在哪裏你看到填充?我想我不能看到它,因爲白色背景.. –

+0

你也需要把你所有的樣式內聯。大多數電子郵件客戶端會忽略你的CSS。這可能會幫助你,http://beaker.mailchimp.com/inline-css – samanthasquared

回答

2

在Chrome,問題是用戶代理樣式表增加的2px到tableborder-spacing。嘗試:

table {border-spacing: 0px;} 
+1

這個答案是正確的。如果您使用Web檢查器在Web瀏覽器中加載頁面,則可以突出顯示「

」,並立即在整個圖像周圍看到2px邊框。我在啓用了「開發者」菜單的情況下使用了Safari。 – JakeGould

2

如果是指電子郵件內嵌樣式需要

<table id="wrapper" cellpadding="0" cellspacing="0">