填充不应用于容器元素内的元素？ [英] Padding not being applied to element inside container element?
本文介绍了填充不应用于容器元素内的元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
需求
我本质上试图复制此
Requirements
I'm essentially trying to replicate the webpage output for this assignment. Pictures used in webpage are here. That's basically my ultimate goal in all of this, getting this webpage as close to the desired output as possible.
All of the style must be implemented in CSS. The only HTML tags I can use are organizational ones.
Problem
The formatting and spacing with the webpage that I'm trying to create and replicate is unexpectedly wrong.
Each of the text bubbles is supposed to be separated by 20pts of vertical distance. This is something I've attempted to implement in CSS like so:
.reviewer-text {
padding-bottom: 20pt;
}
This, however, doesn't work. Almost all the text-bubbles are staggered to a position where they shouldn't be.
If you see the single-line text bubble written by the reviewer Jay Sherman, the vertical distance is smaller and the icon in the text-bubble isn't centered in the way that the other logo images are.
Upon inspecting the element with Firebug, I noticed that the padding is applied only to the text. I don't know how to fix this. I need the padding to apply to the element as a whole. The padding superficially appears to work for the rest of the elements because there are multiple lines of text, but it doesn't, really.
Main Issues That Need to Be Addressed
- I need to fix the padding between the reviews.
- I need to fix the images in the reviews so they're oriented properly.
- I need to fix the heading so it's in the same position as the heading in the desired output.
All of these things need to be fixed without affecting the formatting of the rest of the webpage. The ultimate goal is to keep it as close to the desired output as possible.
Current Output overlayed on Desired Output
^ This should make the differences between the two more immediately obvious.
Code
#banner {
height: 50px;
background-image: url(https://webster.cs.washington.edu/images/rancidbannerbg.png);
background-repeat: repeat-x;
}
#banner img {
display: block;
margin-left: auto;
margin-right: auto;
}
body {
background-image: url(https://webster.cs.washington.edu/images/moviebg.png);
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
margin: 0px;
padding: 0px;
}
#column-left, #column-right {
margin-right: 2%;
width: 47%;
}
#column-left {
float: left;
margin-left: 2%;
}
#column-right {
float: right;
}
#container {
background-color: #EEEEEE;
border-radius: 20px;
box-shadow: 5px 5px 5px gray;
margin: auto;
width: 800px;
}
#date {
background-color: #A2B964;
clear: both;
margin-bottom: 0;
padding: 5px;
text-align: center;
}
h1, .reviewer-text {
font-family: Georgia, "Times New Roman", serif;
}
h1 {
font-size: 24pt;
font-weight: bold;
text-align: center;
text-shadow: 3px 3px #999999;
}
#logo {
background-image: url(https://webster.cs.washington.edu/images/rottenlargebg.png);
background-repeat: repeat-x;
height: 83px;
font-size: 48pt;
font-weight: bold;
color: red;
}
#logo img {
vertical-align: bottom;
}
.publication {
font-style: italic;
}
#reviews {
width: 550px;
}
.reviewer-info {
padding-bottom: 20px;
}
.reviewer-info img, .reviewer-text img {
float: left;
margin-right: 5px;
}
.reviewer-text {
background-color: #FFFFFF;
border: 2px solid #CCCCCC;
border-radius: 20px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
#general-overview {
width: 250px;
background-color: #A2B964;
font-family: Arial, Helvetica, sans-serif;
float: right;
}
#general-overview dt {
font-weight: bold;
margin-top: 10pt;
padding-left: 10pt;
}
#general-overview dd {
padding-left: 10pt;
padding-right: 10pt;
}
#general-overview ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#validators {
bottom: 0px;
right: 0px;
position: fixed;
opacity: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
<link href="movie.css" type="text/css" rel="stylesheet" />
<link rel="icon" type="image/gif" href="rotten.gif" />
</head>
<body>
<div id = "banner">
<img src="https://webster.cs.washington.edu/images/rancidbanner.png" alt="Rancid Tomatoes" />
</div>
<h1>TMNT (2007)</h1>
<div id="container">
<div id="general-overview">
<div>
<img src="https://webster.cs.washington.edu/images/overview.png" alt="general overview" />
</div>
<dl>
<dt>STARRING</dt>
<dd>Patrick Stewart <br /> Mako <br /> Sarah Michelle Gellar <br /> Kevin Smith</dd>
<dt>DIRECTOR</dt>
<dd>Kevin Munroe</dd>
<dt>RATING</dt>
<dd>PG</dd>
<dt>THEATRICAL RELEASE</dt>
<dd>Mar 23, 2007</dd>
<dt>MOVIE SYNOPSIS</dt>
<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>
<dt>MPAA RATING</dt>
<dd>PG, for animated action violence, some scary cartoon images and mild language</dd>
<dt>RELEASE COMPANY</dt>
<dd>Warner Bros.</dd>
<dt>RUNTIME</dt>
<dd>90 mins</dd>
<dt>GENRE</dt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
<dt>BOX OFFICE</dt>
<dd>$54,132,596</dd>
<dt>LINKS</dt>
<dd>
<br />
<ul>
<li><a href="http://www.ninjaturtles.com/">The Official TMNT Site</a></li>
<li><a href="http://www.rottentomatoes.com/m/teenage_mutant_ninja_turtles/">RT Review</a></li>
<li><a href="http://www.rottentomatoes.com/">RT Home</a></li>
</ul>
</dd>
</dl>
</div>
<div id="reviews">
<div id="logo">
<img src="https://webster.cs.washington.edu/images/rottenlarge.png" alt="Rotten" />
33%
</div>
<div id="column-left">
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Peter Debruge <br />
<span class="publication">Variety</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Todd Gilchrist <br />
<span class="publication">IGN Movies</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>It stinks!</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Jay Sherman (unemployed)
<br />
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Joshua Tyler <br />
<span class="publication">CinemaBlend.com</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>This movie sucks because reasons.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
T. Tally Nobias <br />
<span class="publication">objectivereviews.com</span>
</p>
</div>
<div id="column-right">
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Jeannette Catsoulis <br />
<span class="publication">New York Times</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Ed Gonzalez <br />
<span class="publication">Slant Magazine</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
<q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Mark Palermo <br />
<span class="publication">Coast (Halifax, Nova Scotia)</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Steve Rhodes <br />
<span class="publication">Internet Reviews</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>This movie is literally the worst movie ever. I'm not going to explain why. -10000000/10.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
A. Rheal Kritik <br />
<span class="publication">Facade Inc.</span>
</p>
</div>
</div>
<p id="date">(1-10) of 88</p>
</div>
<div id="validators">
<a href="https://webster.cs.washington.edu/validate-html.php"><img src="https://webster.cs.washington.edu/images/w3c-html.png" alt="Valid HTML5" /></a><br />
<a href="https://webster.cs.washington.edu/validate-css.php"><img src="https://webster.cs.washington.edu/images/w3c-css.png" alt="Valid CSS" /></a>
</div>
</body>
</html>
解决方案
Add Margin-bottom
#banner {
height: 50px;
background-image: url(https://webster.cs.washington.edu/images/rancidbannerbg.png);
background-repeat: repeat-x;
}
#banner img {
display: block;
margin-left: auto;
margin-right: auto;
}
body {
background-image: url(https://webster.cs.washington.edu/images/moviebg.png);
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
margin: 0px;
padding: 0px;
}
#column-left, #column-right {
margin-right: 2%;
width: 47%;
}
#column-left {
float: left;
margin-left: 2%;
}
#column-right {
float: right;
}
#container {
background-color: #EEEEEE;
border-radius: 20px;
box-shadow: 5px 5px 5px gray;
margin: auto;
width: 800px;
}
#date {
background-color: #A2B964;
clear: both;
margin-bottom: 0;
padding: 5px;
text-align: center;
}
h1, .reviewer-text {
font-family: Georgia, "Times New Roman", serif;
}
h1 {
font-size: 24pt;
font-weight: bold;
text-align: center;
text-shadow: 3px 3px #999999;
}
#logo {
background-image: url(https://webster.cs.washington.edu/images/rottenlargebg.png);
background-repeat: repeat-x;
height: 83px;
font-size: 48pt;
font-weight: bold;
color: red;
}
#logo img {
vertical-align: bottom;
}
.publication {
font-style: italic;
}
#reviews {
width: 550px;
}
.reviewer-info {
padding-bottom: 20px;
}
.reviewer-info img, .reviewer-text img {
float: left;
margin-right: 5px;
}
.reviewer-text::after {
clear: both;
content: "";
display: block;
}
.reviewer-text {
background-color: #FFFFFF;
border: 2px solid #CCCCCC;
border-radius: 20px;
padding-top: 8px;
padding-bottom: 8pt;
padding-left: 8px;
padding-right: 8px;
margin-bottom:20pt;
}
#general-overview {
width: 250px;
background-color: #A2B964;
font-family: Arial, Helvetica, sans-serif;
float: right;
}
#general-overview dt {
font-weight: bold;
margin-top: 10pt;
padding-left: 10pt;
}
#general-overview dd {
padding-left: 10pt;
padding-right: 10pt;
}
#general-overview ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#validators {
bottom: 0px;
right: 0px;
position: fixed;
opacity: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
<link href="movie.css" type="text/css" rel="stylesheet" />
<link rel="icon" type="image/gif" href="rotten.gif" />
</head>
<body>
<div id = "banner">
<img src="https://webster.cs.washington.edu/images/rancidbanner.png" alt="Rancid Tomatoes" />
</div>
<h1>TMNT (2007)</h1>
<div id="container">
<div id="general-overview">
<div>
<img src="https://webster.cs.washington.edu/images/overview.png" alt="general overview" />
</div>
<dl>
<dt>STARRING</dt>
<dd>Patrick Stewart <br /> Mako <br /> Sarah Michelle Gellar <br /> Kevin Smith</dd>
<dt>DIRECTOR</dt>
<dd>Kevin Munroe</dd>
<dt>RATING</dt>
<dd>PG</dd>
<dt>THEATRICAL RELEASE</dt>
<dd>Mar 23, 2007</dd>
<dt>MOVIE SYNOPSIS</dt>
<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>
<dt>MPAA RATING</dt>
<dd>PG, for animated action violence, some scary cartoon images and mild language</dd>
<dt>RELEASE COMPANY</dt>
<dd>Warner Bros.</dd>
<dt>RUNTIME</dt>
<dd>90 mins</dd>
<dt>GENRE</dt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
<dt>BOX OFFICE</dt>
<dd>$54,132,596</dd>
<dt>LINKS</dt>
<dd>
<br />
<ul>
<li><a href="http://www.ninjaturtles.com/">The Official TMNT Site</a></li>
<li><a href="http://www.rottentomatoes.com/m/teenage_mutant_ninja_turtles/">RT Review</a></li>
<li><a href="http://www.rottentomatoes.com/">RT Home</a></li>
</ul>
</dd>
</dl>
</div>
<div id="reviews">
<div id="logo">
<img src="https://webster.cs.washington.edu/images/rottenlarge.png" alt="Rotten" />
33%
</div>
<div id="column-left">
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Peter Debruge <br />
<span class="publication">Variety</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Todd Gilchrist <br />
<span class="publication">IGN Movies</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>It stinks!</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Jay Sherman (unemployed)
<br />
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Joshua Tyler <br />
<span class="publication">CinemaBlend.com</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>This movie sucks because reasons.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
T. Tally Nobias <br />
<span class="publication">objectivereviews.com</span>
</p>
</div>
<div id="column-right">
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Jeannette Catsoulis <br />
<span class="publication">New York Times</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Ed Gonzalez <br />
<span class="publication">Slant Magazine</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
<q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Mark Palermo <br />
<span class="publication">Coast (Halifax, Nova Scotia)</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Steve Rhodes <br />
<span class="publication">Internet Reviews</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>This movie is literally the worst movie ever. I'm not going to explain why. -10000000/10.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
A. Rheal Kritik <br />
<span class="publication">Facade Inc.</span>
</p>
</div>
</div>
<p id="date">(1-10) of 88</p>
</div>
<div id="validators">
<a href="https://webster.cs.washington.edu/validate-html.php"><img src="https://webster.cs.washington.edu/images/w3c-html.png" alt="Valid HTML5" /></a><br />
<a href="https://webster.cs.washington.edu/validate-css.php"><img src="https://webster.cs.washington.edu/images/w3c-css.png" alt="Valid CSS" /></a>
</div>
</body>
</html>
这篇关于填充不应用于容器元素内的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
