神秘填料？ [英] Mystery Padding..?
本文介绍了神秘填料？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我最近设计并完成了2个通讯;但是当我回去做一个快速的改变（添加背景颜色到容器外面）我意识到内容和背景颜色之间有一些神秘填充，我想实现的是获取背景颜色对着主要内容的边缘。我已经玩了CSS相当多，但仍然没有出来一个修复..
I recently designed and finished 2 newsletters; but when I went back to make a quick change (add a background color to the outside of the container) I realized that there is some mystery padding between the content and the background color, what I'm trying to accomplish is to get the background color right up against the edge of the main content. I've played around with the CSS quite a bit, but still haven't come up with a fix..
Fiddle
以下是通讯的完整来源： p>
Here's the full source of the newsletter:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Cook's Nook</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
/* Reset Styles */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table td{border-collapse:collapse;}
#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
/* Template Styles */
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Page
* @section background color
* @tip Set the background color for your email. You may want to choose one that matches your company's branding.
* @theme page
*/
body, #backgroundTable{
background-color:#7C1A27;
}
/**
* @tab Page
* @section email border
* @tip Set the border for your email.
*/
#templateContainer{
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1, .h1{
color:#000000;
display:block;
font-family:Arial;
font-size:12px;
line-height:100%;
margin-top:0;
margin-right:0;
margin-left:0;
text-align:left;
font-weight: normal;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2, .h2{
color:#202020;
display:block;
font-family:Arial;
font-size:30px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3, .h3{
color:#202020;
display:block;
font-family:Arial;
font-size:26px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4, .h4{
color:#202020;
display:block;
font-family:Arial;
font-size:16px;
font-weight:normal;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Header
* @section header style
* @tip Set the background color and border for your email's header area.
* @theme header
*/
#templateHeader{
background-color:#FFFFFF;
border-bottom:0;
}
/**
* @tab Header
* @section header text
* @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
.headerContent{
color:#202020;
font-family:Arial;
font-size:34px;
font-weight:bold;
line-height:100%;
padding:0;
text-align:center;
vertical-align:middle;
}
/**
* @tab Header
* @section header link
* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/
.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px !important;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: MAIN BODY /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Body
* @section body style
* @tip Set the background color for your email's body area.
*/
#templateContainer, .bodyContent{
background-color:#FFFFFF;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent div{
color:#505050;
font-family:Arial;
font-size:13px;
line-height:120%;
text-align:left;
margin-left: 10px
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.bodyContent img{
display:inline;
height:auto;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and top border for your email's footer area.
* @theme footer
*/
#templateFooter{
background-color:#FFFFFF;
border-top:0;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent div{
color:#707070;
font-family:Arial;
font-size:12px;
line-height:125%;
text-align:left;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.footerContent img{
display:inline;
}
/**
* @tab Footer
* @section social bar style
* @tip Set the background color and border for your email's footer social bar.
* @theme footer
*/
#social{
background-color:#FAFAFA;
border:0;
}
/**
* @tab Footer
* @section social bar style
* @tip Set the background color and border for your email's footer social bar.
*/
#social div{
text-align:center;
}
/**
* @tab Footer
* @section utility bar style
* @tip Set the background color and border for your email's footer utility bar.
* @theme footer
*/
#utility{
background-color:#FFFFFF;
border:0;
}
/**
* @tab Footer
* @section utility bar style
* @tip Set the background color and border for your email's footer utility bar.
*/
#utility div{
text-align:center;
}
#monkeyRewards img{
max-width:190px;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
<tr>
<td class="headerContent">
<!-- // Begin Module: Standard Header Image \\ -->
<img src="images/header-bg.png" />
<a href="#"><img src="images/social-events.png" style="float:right;padding-right:25px;" /></a>
<a href="https://www.facebook.com/TheCooksNook?fref=ts"><img src="images/social-fb.png" style="float:right;padding-right:3px;" /></a>
<!-- // End Module: Standard Header Image \\ -->
<a href="#"><img src="images/logo.png" style="float:left;padding-top:20px;padding-left:30px;" /></a>
<br /><br /><div style="float:right;">
<h1 style="padding-right:25px;text-align:right;margin-top:30px;"><strong>Holiday Hours:</strong> Monday-Friday 9am-8pm</h1>
<h1 style="padding-right:25px;text-align:right;">Saturday 9am-5pm • Sunday 1pm-5pm</h1>
</div>
</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
<tr>
<a href="#"><img src="images/butn-home.png" style="padding-top:15px;" /></a>
<a href="#"><img src="images/butn-about-us.png" /></a>
<a href="#"><img src="images/butn-in-store-coupons.png" /></a>
<a href="#"><img src="images/butn-photo-gallery.png" /></a>
<a href="#"><img src="images/butn-recipe-blog.png" /></a>
<a href="#"><img src="images/butn-contact-us.png" /></a>
<td valign="top" class="bodyContent">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding-bottom:0px;">
<div>
A few years back (1998), one of our employees baked and brought this coffee cake recipe to all of us at the store. We have had numerous calls over the years from people who misplaced this recipe and wanted to see if they could still get it from us.
<br /><br />
<h4>Cindy's Coffee Cake</h4>
<img src="images/featured-image.png" style="float:left;margin-top:5px;"/>
<span style="line-height:110%;">
• 1 yellow cake mix<br />
• 1 cup sour cream<br />
• 3 eggs<br />
• 1 cup pecans<br />
• ¼ cup water<br />
• ¾ cup brown sugar<br />
• 1 teaspoon cinnamon<br />
• ¾ cup melted margarine<br />
• 1 ¼ cups graham cracker crumbs<br /><br />
</span>
Grease and flour a 10-inch round cake pan. In a large bowl, combine cracker crumbs, nuts, brown sugar, cinnamon and margarine. Set aside. In another bowl, pour cake mix, sour cream, water and eggs. Mix at low speed until moist, then beat at high speed for two minutes. Pour half the batter into pan. Sprinkle half crumb mix on top, then repeat with batter and crumb mix. Bake at 350 degrees for 30 – 40 minutes until done. Cool upright for 10 – 15 minutes. Invert on plate. Cool. Glaze with powdered sugar and milk. </div>
<div style="margin-top:25px;"><center>
<img src="images/coupon-1.png" style="" />
<img src="images/coupon-2.png" style="padding-left:15px;"/></center>
</div>
<div style="float:right;padding-right:30px;padding-top:20px;">
<a href="#"><img src="images/butn-view-print-coupons.png" /></a>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<!-- // Begin Module: Standard Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td colspan="2" valign="middle" id="utility" style="padding-top:2px;">
<div>
<img src="images/footer-bg.png" />
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Footer \\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\ -->
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</center>
</body>
</html>
推荐答案
是设置table-layout：fixed;并且用元素设置列的宽度。
The best way for me to avoid bad behaviour with table is to set "table-layout:fixed;" on the tables and to set the colums width with elements.
此外，我想你使用某种工具将你的样式标签转换为内联css。我建议反对它，这将产生大量的不必要的代码，将增加你的电子邮件的重量。
Plus, i suppose you are using some kind of tools to convert your style tag into inline css. I'ld advise against it, this will generate a lot of unecessary code that will add weight to your e-mail.
这篇关于神秘填料？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
