Html 填充未应用于容器元素内的元素？

要求

我基本上是在尝试复制这个页面的输出。网页中使用的图片是。这基本上是我的最终目标，让这个网页尽可能接近期望的输出

所有样式都必须在CSS中实现。我唯一可以使用的HTML标记是组织标记

问题

我试图创建和复制的网页的格式和间距出人意料地错误

每个文本气泡应以20分的垂直距离隔开。这是我尝试在CSS中实现的，如下所示：

.reviewer-text {
    padding-bottom: 20pt;
}

然而，这是行不通的。几乎所有的文本气泡都交错到了不应该出现的位置

如果看到审阅者Jay Sherman编写的单行文字气泡，垂直距离会更小，并且文字气泡中的图标不会像其他徽标图像那样居中

在使用Firebug检查元素时，我注意到填充仅应用于文本。我不知道怎么解决这个问题。我需要将填充应用于整个元素。填充表面上似乎对其余元素有效，因为有多行文本，但实际上没有

需要解决的主要问题

• 我需要修正评论之间的空白
• 我需要修复评论中的图像，以便它们正确定位
• 我需要修正标题，使其与所需输出中的标题处于相同位置

所有这些都需要在不影响网页其余部分格式的情况下进行修复。最终目标是使其尽可能接近所需的输出。

^这将使两者之间的差异更加明显

代码

#横幅{
高度：50px；
背景图片：url(https://webster.cs.washington.edu/images/rancidbannerbg.png);
背景重复：重复-x；
}
#横幅img{
显示：块；
左边距：自动；
右边距：自动；
}
身体{
背景图片：url(https://webster.cs.washington.edu/images/moviebg.png);
字体系列：Arial、Helvetica、无衬线字体；
字号：10pt；
边际：0px；
填充：0px；
}
#列左，#列右{
保证金权利：2%；
宽度：47%；
}
#左栏{
浮动：左；
左缘：2%；
}
#右栏{
浮动：对；
}
#容器{
背景色：#EEEEEE；
边界半径：20px；
长方体阴影：5px 5px 5px灰色；
保证金：自动；
宽度：800px；
}
#日期{
背景色：#A2B964；
明确：两者皆有；
页边距底部：0；
填充物：5px；
文本对齐：居中；
}
h1.审阅者文本{
字体系列：佐治亚州，“新罗马时代”，衬线；
}
h1{
字号：24pt；
字体大小：粗体；
文本对齐：居中；
文本阴影：3px 3px#999999；
}
#标志{
背景图片：url(https://webster.cs.washington.edu/images/rottenlargebg.png);
背景重复：重复-x；
高度：83px；
字号：48pt；
字体大小：粗体；
颜色：红色；
}
#标志img{
垂直对齐：底部对齐；
}
.出版{
字体：斜体；
}
#评论{
宽度：550px；
}
.审阅者信息{
垫底：20px；
}
.reviewer信息img、.reviewer文本img{
浮动：左；
右边距：5px；
}
.审阅者文本{
背景色：#FFFFFF；
边框：2个实心#中交；
边界半径：20px；
填充顶部：8px；
垫底：8px；
左侧填充：8px；
右边填充：8px；
}
#概述{
宽度：250px；
背景色：#A2B964；
字体系列：Arial、Helvetica、无衬线字体；
浮动：对；
}
#一般概述{
字体大小：粗体；
利润上限：10分；
左侧填充：10磅；
}
#一般概述{
左侧填充：10磅；
右侧填充：10磅；
}
#一般概述{
列表样式：无；
边际：0px；
填充：0px；
}
#验证器{
底部：0px；
右：0px；
位置：固定；
不透明度：0.5；
}

TMNT-酸败番茄
TMNT（2007年）
主演
帕特里克·斯图尔特
马科
莎拉·米歇尔·盖拉
凯文·史密斯
经理
凯文·门罗
评级
PG
戏剧释放
2007年3月23日
电影简介
在击败了他们的宿敌碎纸机之后，海龟们作为一个家庭已经分开了。
MPAA评级
PG，动画动作暴力，一些可怕的卡通形象和温和的语言
释放公司
华纳兄弟。
运行时
90分钟
体裁
动作/冒险、喜剧、儿童、武术、超级英雄、忍者、动画角色
票房
$54,132,596
链接







33%

这部电影摒弃了厚颜无耻、自我意识强的眨眼，试图让自己看起来光鲜而“酷”，但《曾经在那里》的动画无法与1990年真人电影中当时最前沿的木偶戏相媲美。


彼得·德布鲁格

变化


TMNT是一个有趣的，充满行动的冒险，将满足长期的球迷，并产生一个新的军团。


托德·吉尔克里斯特

IGN电影频道


真臭！


杰伊·谢尔曼（失业）




橡胶套装已经不见了，而且已经用先进的计算机技术重新制作过，但这并没有阻止它们变得单调乏味。


约书亚·泰勒

CinemaBlend.com


.reviewer-text {
    padding-bottom: 20pt;
    box-sizing:border-box;
}