添加填充的奥秘 [英] The mystery of the added 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..
这是通讯的完整来源：
<!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; float: left;}
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:#000000;
}
.bodyContent{
padding-left: 40px;
}
/**
* @tab Page
* @section email border
* @tip Set the border for your email.
*/
#templateContainer{
border: 2px solid #CCC;
}
/**
* @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:#202020;
display:block;
font-family:sans-serif;
font-size:34px;
font-weight:normal;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2, .h2{
color:#000000;
display:block;
font-family:Arial;
font-size:12px;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
font-weight: normal;
}
/**
* @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
*/
h1, .h1{
color:#000000;
display:block;
font-family:Arial;
font-size:16px;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h4, .h4{
color:#871d2a;
display:block;
font-family:Arial;
font-size:13px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: PREHEADER /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Header
* @section preheader style
* @tip Set the background color for your email's preheader area.
* @theme page
*/
#templatePreheader{
background-color:#FAFAFA;
}
/**
* @tab Header
* @section preheader text
* @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
.preheaderContent div{
color:#505050;
font-family:Arial;
font-size:10px;
line-height:100%;
text-align:left;
}
/**
* @tab Header
* @section preheader link
* @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
.preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
/* /\/\/\/\/\/\/\/\/\/\ 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;
}
/* /\/\/\/\/\/\/\/\/\/\ 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:#707070;
font-family:Arial;
font-size:8pt;
line-height:150%;
text-align:left;
margin-bottom: 80px;
}
.bodyContent strong{
color:#707070;
font-family:Arial;
font-size:9pt;
}
/**
* @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;
padding-bottom: 5px;
}
.butn-img {
float: right;
margin-top: 10px;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: SIDEBAR /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Sidebar
* @section sidebar style
* @tip Set the background color and border for your email's sidebar area.
*/
#templateSidebar{
background-color:#FFFFFF;
border-left:0;
}
/**
* @tab Sidebar
* @section sidebar text
* @tip Set the styling for your email's sidebar text. Choose a size and color that is easy to read.
*/
.sidebarContent div{
color:#969696;
font-family:Arial;
font-size:12px;
line-height:150%;
text-align:left;
}
/**
* @tab Sidebar
* @section sidebar link
* @tip Set the styling for your email's sidebar links. Choose a color that helps them stand out from your text.
*/
.sidebarContent div a:link, .sidebarContent div a:visited, /* Yahoo! Mail Override */ .sidebarContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.sidebarContent img{
display:inline;
height:auto;
}
.sidebarContent div strong{
color: #707070;
}
/* /\/\/\/\/\/\/\/\/\/\ 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">
<img src="images/header-bg.png" />
<!-- // Standard Header Image \\ -->
<a href="http://www.heartlandresearch.com/"><img src="images/logo.png" style="padding-bottom:5px; padding-top:25px;padding-bottom:25px;"/></a>
<div style="float:right;">
<span style="float:right;padding-right:25px;"><a href="https://www.facebook.com/TheCooksNook"><img src="images/fb-social.gif" style="margin-top:15px;"/></a></span>
<br /><br /><div style="float:right;">
<h1 style="padding-right:25px;text-align:right;" class="h1">620-241-7180</h1>
<h2 style="padding-right:25px;text-align:right;" class="h2">219 North Main Street, McPherson, KS 67460</h1>
</div>
<!-- // Standard Header Image \\ -->
</td>
<td class="headerContent">
</td>
</tr>
<tr>
<td class="headerContent" style="padding-bottom:20px;">
<a href="http://www.heartlandresearch.com/"><img src="images/butn-home.png" /></a>
<a href="http://www.heartlandresearch.com/studies"><img src="images/butn-about-us.png" /></a>
<a href="http://www.heartlandresearch.com/volunteers/getting-started"><img src="images/butn-in-store-coupons.png" /></a>
<a href="http://www.heartlandresearch.com/sponsors"><img src="images/butn-photo-gallery.png" /></a>
<a href="http://www.heartlandresearch.com/locations"><img src="images/butn-recipe-blog.png" /></a>
<a href="http://www.heartlandresearch.com/locations"><img src="images/butn-contact-us.png" /></a>
</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>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="bodyContent">
<!-- // Standard Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 5px;">
<tr>
<td valign="top" style="border-right: 1px solid #E1E1E1;padding-right:20px;">
<div>
<img src="images/featured-image.png" style="padding-right:20px;margin-bottom:10px;"/>
This scrumptious appetizer is quick and easy to make, try it for you next party, your guests will keep coming back for more.<br /><br /><strong>Captain Rodney's Cheese Bake</strong><br /><img src="images/featured-image-2.png" style="margin-top:5px;"/> <div><ul style="float:left;list-style:bullet;padding-left: 13px;">
<li>½ cup Mayonnaise</li>
<li>8 oz package cream cheese</li>
<li>2 cups grated sharp cheddar cheese</li>
<li>2 green onions – chopped</li>
<li>6 Ritz style crackers – crushed</li>
<li>8 slices bacon – cooked and crumbled or ½ cup of real
bacon bits</li>
<li>½ cup of Captain Rodney’s Boucan Glaze – found at The
Cook’s Nook</li>
</ul></div><span style="float:left;">Mix mayonnaise, cream cheese, cheddar and onions till blended. Place in pie pan. Top with crackers and bake at 350 degrees for 15 minutes. Top with bacon and Captain Rodney’s Glaze. Serve with crackers.</span>
</div>
</td>
</tr>
</table>
<!-- // Standard Content \\ -->
</td>
</tr>
</table>
</td>
<!-- // Begin Sidebar \\ -->
<td valign="top" width="200" id="templateSidebar">
<table border="0" cellpadding="0" cellspacing="0" width="200" style="margin-left:-10px;">
<tr>
<td valign="top" class="sidebarContent">
<!-- // Top Image with Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding-left:20px;padding-top: 5px;">
<div>
<h1 style="text-align:center;" class="h4">This Month's Coupons</h1>
<a href="#"><img src="images/sidebar-image.png" style="margin-bottom:15px;"/></a>
<a href="#"><img src="images/sidebar-image-2.png" style="margin-bottom:15px;" /></a>
<a href="#"><img src="images/butn-view-print-coupons.png" /></a>
</div><br />
<div>
</td>
</tr>
</table>
<!-- // Top Image with Content \\ -->
</td>
</tr>
</table>
</td>
<!-- // End Sidebar \\ -->
</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">
<!-- // Standard Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<img src="images/footer-bg.png" />
</table>
<!-- // Standard Footer \\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\ -->
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</center>
</body>
</html>
推荐答案
我不知道为什么你有很多在CSS顶部的内联样式。这是有原因吗？
I'm not sure why you have a lot of in-line styling on top of your CSS. Is there a reason for this?
但如果我理解这一点，你希望在中心容器的内容和黑色背景之间没有空间外部容器？
But if I'm understanding this, you're looking to have no space between the content in the center container and the black background of the outer container?
首先查看电话号码和地址部分，它们放在H1和H2中，两者都具有<$
First to look at the phone number and address sections, they're housed in an H1 and H2, which both have in-line styles of padding-right: 25px, which will resolve the header section.
在第38行，您有以下规则：
On line 38, you have the following rule: .bodyContent { padding-left: 40px; }, which will resolve the left aligned content area.
然后，对于本月优惠券，您要将文本对齐以居中。但是，其中一个父表（你在这里有很多嵌套表，看起来很不必要），你有一个负的左边距10px。
Then for the "This Month's Coupons" you are aligning the text to be centered. But, one of the parent tables (you have quite a few nested tables here. It seems very unnecessary), you have a negative left margin of 10px.
这篇关于添加填充的奥秘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
