如何移除div内图片的内边距且不影响容器内其他元素

你当前的问题源于容器.mainoutline设置了padding:10px，导致图片和文本都被内边距撑开，无法实现图片贴边、文本留内边距的需求。下面提供几种可行的实现方式：

方式一：移除容器内边距，给文本单独设置内边距 #

直接去掉容器的内边距，给<p>标签单独添加内边距，这样图片会自然紧贴容器边缘，文本则保留内边距：

修改后的CSS：

.mainoutline {
  border: 1px solid #d30606;
  background-color: #000000;
  position: fixed;
  width: 1080px;
  height: 300px;
  margin: auto;
  /* 移除容器的padding */
}

.mainoutline p {
  padding: 10px;
  margin: 0; /* 可选：清除p标签默认外边距，避免多余间距 */
}

方式二：给图片设置负外边距抵消容器内边距 #

保留容器的padding，给图片设置负外边距抵消容器的内边距，同时保证文本的内边不受影响：

修改后的CSS：

.mainoutline {
  border: 1px solid #d30606;
  background-color: #000000;
  position: fixed;
  width: 1080px;
  height: 300px;
  margin: auto;
  padding: 10px;
}

.mainoutline img {
  /* 负外边距抵消容器的padding，底部留10px与文本隔开 */
  margin: -10px -10px 10px -10px;
  /* 计算宽度抵消左右负边距，确保图片填满容器 */
  width: calc(100% + 20px);
}

方式三：用CSS选择器给非图片元素统一加内边距 #

移除容器的padding，使用:not(img)选择器给容器内除图片外的所有子元素添加内边距，适合后续容器添加其他文本元素的场景：

修改后的CSS：

.mainoutline {
  border: 1px solid #d30606;
  background-color: #000000;
  position: fixed;
  width: 1080px;
  height: 300px;
  margin: auto;
  /* 移除容器的padding */
}

.mainoutline > *:not(img) {
  padding: 10px;
  margin: 0;
}

内容的提问来源于stack exchange，提问作者Miles A