我应用于元素的样式不适用于嵌套在其中的元素？

Question

条件

我基本上是在尝试尽可能复制此 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 的网页输出。不仅相似，而且尽可能接近相同。

这需要以不只是表面上反映预期输出的方式完成，而是以 "right" 方式完成。例如，我可以很好地调整填充和边距大小，直到它看起来符合需要，但这并不能解决首要问题，而且会导致代码风格不佳。

这主要是通过 CSS 完成的。只能使用组织 HTML 标签，不能导入包或代码。

问题:

每条评论应该以 20pt 的垂直距离分隔。无论出于何种原因，这都不奏效。

这可能与我的一些评论看起来像 this when I need them to look like this 有关。

这可能与填充仅适用于 text when it needs to apply to the review as a whole 这一事实有关。

您可以在第一张图片中看到代表填充的蓝色条仅在文本下方，而不是图像和文本下方。

我想知道这是否与 img 元素是行内元素而不是块元素有关？如果您对此有任何建议，我们将不胜感激。

代码：

CSS

HTML

Answer 1

填充不适用于您的图像，因为您有

float: left

适用于他们。如果您将属性去掉，填充将考虑 img。

旁注：也许您应该重新考虑您的 html 结构。从逻辑上讲，评论文本和评论者属于同一类，因此它们应该包含在某个父 div 元素中。看看真正的烂番茄网站以及他们如何构建评论，让 "inspire" 你 ;-)

但基本上应该是这样的：

<div class="review">
  <div class="review_quote"></div>
  <div class="review_source"></div>
</div>

结构良好 HTML 确实有助于造型。 HTML 和 CSS 齐头并进，所以如果你的 HTML 很乱，你的 CSS 也会很乱，"hacky" 也会。所以首先要确保你的 HTML 有意义（分组、嵌套等）。

Answer 2

将此 class 添加到您的 css

.reviewer-text::after {
    clear: both;
    content: "";
    display: block;
}

Answer 3

嗯..你在 css 中的填充仅指 class 'reviewer-info'。 class 'reviewer-text' 的元素将其填充设置为 8px；

如果您希望该块的结果如图所示，请为 'reviewer-text' 应用底部填充。变化：

.reviewer-text {
   padding: 8px;
}

至：

.reviewer-text {
   padding: 8px 8px 20px 8px;
}

参见：https://fiddle.jshell.net/a9xxoz8L/1/

我应用于元素的样式不适用于嵌套在其中的元素？

Style that I apply to an element doesn't apply to elements nested inside?

html

css

element

margin

padding