Question

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

＆＃13;

* {
  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;
}

＆＃13;

<!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>
	<h1>Lloyd &amp; Diane's Wedding</h1>
</header>
<section id="mainContent">
	<h2>April 14, 1989 at <time datetime="15:00">3:00PM</time></h2>
    <dl>
    	<dt>Hilton Seattle </dt>
        <dd>1301 6TH AVENUE</dd>
        <dd>SEATTLE, WASHINGTON, 98101</dd>
    </dl>
  	<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>

＆＃13;

Answer 1

将页面的背景颜色应用于正文并且不是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>
	<h1>Lloyd &amp; Diane's Wedding</h1>
</header>
<section id="mainContent">
	<h2>April 14, 1989 at <time datetime="15:00">3:00PM</time></h2>
    <dl>
    	<dt>Hilton Seattle </dt>
        <dd>1301 6TH AVENUE</dd>
        <dd>SEATTLE, WASHINGTON, 98101</dd>
    </dl>
  	<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>

Answer 2

您的规则background-color: lavenderblush;适用于h2内的#mainContent，使内部元素具有背景颜色。将来，右键单击Chrome中的元素，然后选择＆＃34;检查元素＆＃34;帮助调试这样的事情。

Answer 3

* {

background-color：lavenderblush;
保证金：0;
}

由于此代码块而出现问题。这一个超过每个块的背景颜色

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

3 个答案: