CSS 移除子类的父类

Question

是否可以删除图像上的填充，但保留 style.css 文件中文本的填充:

<p>
  Hello World
 <img src=""> 
</p>  

我已将样式设置为:

style.css  
p { padding: 5px 10px  }  
img { padding: 0px !important}  

Answer 1

您需要考虑元素如何交互。填充是元素内部的空间，边距是元素外部的空间。两者都在布局中“插入”元素。

图像没有填充。 (至少不像其他元素，如果你想要偏移边框，你只会看到它)

此外，元素的文本内容没有任何属性，因此您不能从中添加/删除填充。

你目前有这样的东西:

------------<p>-------------

some text
------------<img>-----------

------------</img>----------

------------</p>------------

这意味着文本直接位于图像上，图像与图像底部和段落末尾之间有空间。

如果您希望图像和文本之间有空间，您可以向图像添加 margin-top 以将其向下推。如果你想删除图像和段落末尾之间的空间，你可以从段落标记中删除 padding-bottom 或者给图像一个负的 margin-bottom

p {
  margin-bottom: 20px;
  background-color: aqua;
}
img {
  display:block;
}

p.one {
  padding: 5px 10px;
}

p.two {
  padding: 5px 10px 0 10px;
  // top right bottom left
}

p.two img {
  margin-top: 20px;
}

What you have
<p class="one">
some text
<img src="https://via.placeholder.com/150" />
</p>

Giving the image space
<p class="two">
some text
<img src="https://via.placeholder.com/150" />
</p>