如何将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;
}