为图片设置内边距，实现文本位于图片下方且不超出父容器宽度

核心问题分析 #

1. 描述文本被嵌套在带内边距的.logo-container内部，导致文本处于内边距区域内，不符合“内边距之外”的需求
2. .logo-container的内边距设置为4rem 2.4rem，与要求的25px不符
3. 当前.logo-container设置了固定宽高，图片继承该宽高后，实际显示尺寸会因容器内边距被压缩，无法达到预期的20.8rem×17.4rem

修改后的代码实现 #

CSS 代码

.logoTile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logoTile .logo-container {
  padding: 25px; /* 设置四周25px内边距 */
}

.logoTile .logo-container img {
  width: 20.8rem; /* 图片固定宽度 */
  height: 17.4rem; /* 图片固定高度 */
  object-fit: cover;
}

.description-text {
  text-align: center;
  max-width: 20.8rem; /* 文本最大宽度与图片一致 */
  padding: 0 16px; /* 左右16px内边距 */
  margin-top: 8px; /* 可选：增加文本与图片的间距 */
}

HTML 代码

<div class="logoTile">
  <div class="logo-container">
    <img src="https://placekitten.com/1440/671" loading="eager" alt="Image Alt Text" />
  </div>
  <!-- 将描述文本移到logo-container外部，与图片容器同级 -->
  <p class="description-text">This text should not flow beyond the width of the image (infact should have 16px of padding either side)</p>
</div>

关键调整说明 #

• 结构调整：把描述文本从.logo-container中移出，确保它处于图片内边距区域之外，直接位于图片下方
• 内边距修正：将.logo-container的内边距改为要求的25px，同时移除容器的固定宽高，避免压缩图片尺寸
• 文本宽度控制：给.description-text设置max-width:20.8rem，让文本宽度不超过图片宽度，再添加左右16px内边距优化阅读体验

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