如何将CSS填充应用于一个元素而不是其子元素

Question

给出以下代码

<div class="container">
  <p>Some Text</p>
  <p><img src="image.jpg"><p>
  <p>More Text</p>
</div>

的CSS

.container {
  width: 640px;
}

.container p {
  padding: 10px 20px;
}

当有图像时，我不希望它从p继承填充。 我怎样才能做到这一点？ 请记住，我不能更改实际的html，只能更改CSS。

Answer 1

不明白你的意思。 填充不是继承的...

您的意思是您不希望包含img标签的p具有填充吗？

您可以尝试以下方法：

HTML：

<div class="container">
  <p>Some Text</p>
  <p><div class="center"><img src="afb.png"></div><p>
  <p>More Text</p>
</div>

CSS：

.container {
  width: 640px;
}

.container p {
  padding: 10px 20px;
}

.container p img {
  margin: -10px -20px;
}

.center{
  text-align:center;
}

Answer 2

您可以添加另一个覆盖第二个的CSS规则

.container p img
{
   padding : 0 0;
}