Question

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

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

我将样式设置为：

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

Answer 1

我不确定您要做什么。填充对于您为其指定的每个元素都是独立的；因此为段落设置padding不会将其应用于图像，但是在图像上进行设置可能会增加段落的高度。

您还可以选择不使其嵌套而并排显示，因此该段落的填充完全不会影响图像。

p {
  padding: 5px 10px;
  border: 1px solid red;
}

img {
  padding: 0px;
  height: 20px;
  width: 20px;
  border: 1px solid blue;
}

.img2 {
  padding: 15px;
  height: 20px;
  width: 20px;
  border: 1px solid blue;
}

.p2 {
  padding: 0px;
  border: 1px solid red;
}

.p3 {
  padding: 15px;
  border: 1px solid red;
  display: inline-block;
}

.container {
  border: 1px solid green;
}

<!-- Paragraph with padding and image inside with padding -->
<p>
  Hello World
  <img src="">
  <img src="" class="img2">
</p>

<!-- Paragraph without padding and image inside without padding -->
<p class="p2">
  Hello World
  <img src="">
</p>

<!-- Container with paragraph with padding and image without padding as separate elements  -->
<div class="container">
  <p class="p3">Hello World</p>
  <img src="">
</div>

Answer 2

您需要考虑元素如何相互作用。填充是元素内部的空间，边距是元素外部的空间。两者都“推送”布局中的某个元素。

图像没有填充。（至少与其他元素不同，您仅在需要偏移边框时才能看到它）

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

您当前有这样的东西：

------------<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>

CSS删除孩子的父类

2 个答案: