为什么我的背景颜色只适用于我的填充？

问题描述：

对于我的生活，我无法弄清楚为什么我的背景颜色#mainContent只适用于填充。我真的希望它填满整个容器，但无论我添加或删除什么，背景颜色都不会变化。删除填充完全删除背景颜色。为什么我的背景颜色只适用于我的填充？

* { 
 
    background-color: lavenderblush; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    font-family: 'Playfair Display', serif; 
 
} 
 

 
header { 
 
    margin-top: 10%; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    font-family: 'Sacramento', cursive; 
 
    font-size: 400%; 
 
    color: white; 
 
    padding: 10px; 
 
    background-color: rgba(198, 79, 119, 0.5); 
 
} 
 

 
h2 { 
 
    font-size: 200%; 
 
    padding: 20px; 
 
    color: rgba(198, 79, 119, 0.5); 
 
} 
 

 
#mainContent { 
 
    background-color: #FFF; 
 
    padding: 20px; 
 
    height: 100%; 
 
    width: 50%; 
 
    margin: auto; 
 
    text-align: center; 
 
    line-height: 2em; 
 
} 
 

 
footer { 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    margin: auto; 
 
    width: 50%; 
 
    text-align: center; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="invite-style.css"> 
 
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Sacramento" rel="stylesheet"> 
 
<meta charset="UTF-8"> 
 
<title>Invitation</title> 
 
</head> 
 

 
<body> 
 
<header> 
 
\t <h1>Lloyd &amp; Diane's Wedding</h1> 
 
</header> 
 
<section id="mainContent"> 
 
\t <h2>April 14, 1989 at <time datetime="15:00">3:00PM</time></h2> 
 
    <dl> 
 
    \t <dt>Hilton Seattle </dt> 
 
     <dd>1301 6TH AVENUE</dd> 
 
     <dd>SEATTLE, WASHINGTON, 98101</dd> 
 
    </dl> 
 
    \t <p>Join Lloyd &amp; Diane as they take a leap of faith into holy matrimony. Reception to follow ceremony.</p> 
 
</section> 
 
<footer>Kindly RSVP to Corey &amp; DC at <a href="tel:1-555-867-5309">1-555-867-5309</a> by April 1st</footer> 
 
</body> 
 
</html>

答

它总是更好地将页面的背景颜色应用到body，而不是html页面中的所有元素。这里的工作代码片段：

* {  
 
    margin: 0; 
 
} 
 

 
body { 
 
background-color: lavenderblush; 
 
    font-family: 'Playfair Display', serif; 
 
} 
 

 
header { 
 
    margin-top: 10%; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    font-family: 'Sacramento', cursive; 
 
    font-size: 400%; 
 
    color: white; 
 
    padding: 10px; 
 
    background-color: rgba(198, 79, 119, 0.5); 
 
} 
 

 
h2 { 
 
    font-size: 200%; 
 
    padding: 20px; 
 
    color: rgba(198, 79, 119, 0.5); 
 
} 
 

 
#mainContent { 
 
    background-color: #FFF; 
 
    padding: 20px; 
 
    height: 100%; 
 
    width: 50%; 
 
    margin: auto; 
 
    text-align: center; 
 
    line-height: 2em; 
 
} 
 

 
footer { 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    margin: auto; 
 
    width: 50%; 
 
    text-align: center; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="invite-style.css"> 
 
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Sacramento" rel="stylesheet"> 
 
<meta charset="UTF-8"> 
 
<title>Invitation</title> 
 
</head> 
 

 
<body> 
 
<header> 
 
\t <h1>Lloyd &amp; Diane's Wedding</h1> 
 
</header> 
 
<section id="mainContent"> 
 
\t <h2>April 14, 1989 at <time datetime="15:00">3:00PM</time></h2> 
 
    <dl> 
 
    \t <dt>Hilton Seattle </dt> 
 
     <dd>1301 6TH AVENUE</dd> 
 
     <dd>SEATTLE, WASHINGTON, 98101</dd> 
 
    </dl> 
 
    \t <p>Join Lloyd &amp; Diane as they take a leap of faith into holy matrimony. Reception to follow ceremony.</p> 
 
</section> 
 
<footer>Kindly RSVP to Corey &amp; DC at <a href="tel:1-555-867-5309">1-555-867-5309</a> by April 1st</footer> 
 
</body> 
 
</html>

答

你的规则background-color: lavenderblush;被施加到h2的#mainContent内部，使内元件具有背景颜色。在将来，右键单击Chrome中的一个元素，然后选择“检查元素”来帮助调试这样的事情。

答

* {

背景色：淡紫红;
margin：0;
}

由于此代码块而出现问题。这一款搭配每块背景色

为什么我的背景颜色只适用于我的填充？

相关推荐