Html 我应用于元素的样式不'；不适用于嵌套在内部的元素？

条件

我基本上是在尝试复制这个页面的输出。网页中使用的图片是。这基本上是我所有这些的最终目标，让这个网页尽可能地接近目标。不仅相似，而且尽可能接近相同

这需要以一种不只是表面上反映预期输出的方式完成，而是以“正确”的方式完成。例如，我可以很好地调整填充和边距大小，直到它看起来像它需要的样子，但这并不能解决总体问题，并且会导致代码样式错误

这主要是通过CSS实现的。只能使用组织HTML标记，不能导入任何包或代码

问题：

每次审查应以20磅的垂直距离分开。不管什么原因，这都行不通

这可能与我的一些评论在我需要它们的时候看起来像一个事实有关

这可能与这样一个事实有关，即填充仅在需要应用于审阅时才应用于

您可以在第一个图像中看到，表示填充的蓝色条仅位于文本下方，而不位于图像和文本下方

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

代码：

---

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

float: left

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

另一方面：也许你应该重新考虑你的html结构。从逻辑上讲，审阅文本和审阅者属于一起，因此它们应该由某个父div元素封闭。看看真正的烂西红柿网站，看看他们是如何组织评论的，让评论“激励”你；-）

但基本上应该是这样的：

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

---

结构良好的HTML确实有助于设计样式。HTML和CSS是齐头并进的，所以如果你的HTML凌乱不堪，你的CSS也会凌乱不堪。因此，首先确保您的HTML有意义（分组、嵌套等）。

在css中添加此类

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

---

嗯。。css中的填充仅引用类“审阅者信息”。类为“reviewer text”的元素的填充设置为8px

如果您想得到图片上类似的块的结果，请为“审阅者文本”应用底部填充。更改：

.reviewer-text {
   padding: 8px;
}

致：

---

请参阅：

这实际上不是这个的复制品吗？谢谢！这个答案对我帮助最大。很高兴我能帮上忙；-）

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