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