聚光灯网格布局中图片下方文本完美对齐问题求助

我正在尝试让聚光灯图库中图片下方的名称（h3）与描述（p）文本和图片左边缘完美对齐，但经过多次调整仍未成功。

• 在.spotlight-item和.spotlight-item-big上设置align-items: flex-start
• 移除.spotlight-info、h3和p的padding-left与margin-left以消除额外间距
• 设置box-sizing: border-box将内边距纳入宽度计算

CSS #

/* Spotlight Grid */

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 10px;
  max-width: 60%;
  margin: 0 auto;
  margin-bottom: 30px;
  margin-top: 40px;
}


/* Spotlight Item (Big and Small) */

.spotlight-item-big,
.spotlight-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* To align items to the left */
  box-sizing: border-box;
  width: 100%;
  height: auto;
}


/* Spotlight Info */

.spotlight-info {
  padding-top: 10px;
  text-align: left;
  width: 100%;
  padding-left: 0;
  margin-left: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}


/* Spotlight Info Headings */

.spotlight-info h3 {
  font-size: 25px;
  margin-bottom: 4px;
  font-weight: bold;
  font-family: 'Playfair Display', serif;
  text-align: left;
  margin-left: 0;
}


/* Spotlight Info Paragraphs */

.spotlight-info p {
  margin: 2px 0;
  font-size: 14px;
  color: #ffffff;
  font-family: 'Poppins', serif;
  text-align: left;
  margin-left: 0;
}

HTML #

<!-- Monthly Spotlight Section -->

<section id="monthly-spotlight" class="spotlight-section">
  <div class="spotlight-image-container">
    <img src="image/ms.png" alt="Monthly Spotlight Image">
  </div>

  <div class="spotlight-grid">
    <!-- Top 3 artworks (rank 1-3) items -->
    <div class="spotlight-item spotlight-item-big">
      <img src="image/mona_lisa.jpg" alt="Mona Lisa">
      <div class="spotlight-info">
        <h3>Mona Lisa</h3>
        <p>Artist: Leonardo</p>
        <p>Year: 1503</p>
        <p>Medium: Portrait</p>
      </div>
    </div>
    <div class="spotlight-item spotlight-item-big">
      <img src="image/guernica.jpg" alt="Guernica">
      <div class="spotlight-info">
        <h3>Guernica</h3>
        <p>Artist: Picasso</p>
        <p>Year: 1937</p>
        <p>Medium: Abstract</p>
      </div>
    </div>
    <div class="spotlight-item spotlight-item-big">
      <img src="image/persistence_of_memory.jpg" alt="The Persistence of Memory">
      <div class="spotlight-info">
        <h3>The Persistence of Memory</h3>
        <p>Artist: Matisse</p>
        <p>Year: 1931</p>
        <p>Medium: Surrealism</p>
      </div>
    </div>
  </div>

  <div class="spotlight-grid-rank-4-7">
    <!-- Next 4 artworks (rank 4-7) items -->
    <div class="spotlight-item">
      <img src="image/birth_of_venus.jpg" alt="The Birth of Venus">
      <div class="spotlight-info">
        <h3>The Birth of Venus</h3>
        <p>Artist: Rembrandt</p>
        <p>Year: 1486</p>
        <p>Medium: Renaissance</p>
      </div>
    </div>
    <div class="spotlight-item">
      <img src="image/water_lilies.jpg" alt="Water Lilies">
      <div class="spotlight-info">
        <h3>Water Lilies</h3>
        <p>Artist: Warhol</p>
        <p>Year: 1919</p>
        <p>Medium: Impressionism</p>
      </div>
    </div>
    <div class="spotlight-item">
      <img src="image/starry_night.jpg" alt="Starry Night">
      <div class="spotlight-info">
        <h3>Starry Night</h3>
        <p>Artist: Vincent van Gogh</p>
        <p>Year: 1889</p>
        <p>Medium: Landscape</p>
      </div>
    </div>
    <div class="spotlight-item">
      <img src="image/last_supper.jpg" alt="The Last Supper">
      <div class="spotlight-info">
        <h3>The Last Supper</h3>
        <p>Artist: Leonardo</p>
        <p>Year: 1498</p>
        <p>Medium: Religious</p>
      </div>
    </div>
  </div>

  <div class="spotlight-image-container-bgms img">
    <img src="image/bgms.png" alt="Monthly Spotlight Image">
  </div>
</section>

问题大概率出在图片的默认样式或者未完全对齐的容器宽度上，你可以尝试以下调整：

1. 统一图片的宽度与边距
   给图片添加样式，确保它填满父容器，同时清除所有默认边距：

.spotlight-item img,
.spotlight-item-big img {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block; /* 消除图片下方的默认空白间隙 */
}

2. 强制文本容器左对齐
   虽然你已经设置了父元素的align-items: flex-start，但可以给文本容器显式添加对齐规则，确保没有隐藏的缩进：

.spotlight-info {
  align-self: flex-start; /* 强制左对齐，继承父元素规则的同时确保生效 */
  padding-left: 0;
  margin-left: 0;
}

3. 重置标题和段落的默认样式
   浏览器会给h3、p标签添加默认的内外边距，你可以先重置再设置需要的间距：

.spotlight-info h3 {
  margin: 0 0 4px 0; /* 只保留底部间距，清除左右和顶部 */
  padding: 0;
}

.spotlight-info p {
  margin: 2px 0; /* 只保留上下间距，清除左右 */
  padding: 0;
}

把这些样式添加到你的CSS中，就能实现文本与图片左边缘的完美对齐。

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