Html 在这个特定的示例中，为什么在最大宽度为100%时子元素会延伸到其父元素之外？

正如您从我的代码中所看到的，我仍在学习，因此，任何与我的代码及其结构相关的问题无关的建设性批评不仅受到欢迎，而且受到高度赞赏

我添加了彩色边框，以便更好地理解每个元素的限制

目前的问题是，图像（蓝色边框）应该保持在其父级内部，即标题（粉色边框），因为我给了图像100%的最大宽度。但100%似乎是所有元素之外的特定位置。

---

HTML:

<main id="main">
  <div id="main-wrapper">
    <header>
      <title>Tristerix Aphyllus</title>
      <h1 id="title">Tristerix Aphyllus</h1>
      <div id="img-div">
        <img
        id="image"
        src="https://f000.backblazeb2.com/b2api/v1/b2_download_file_by_id?fileId=4_z15c789d4ee26751161fe0711_f11571cf7ab6ffd8a_d20200104_m185127_c000_v0001064_t0054"
        alt="A close up of several Tristerix Aphyllus on multiple cacti"
      />
     </div>
    <p id="image-atribution">
        <a
          href="https://www.inaturalist.org/photos/13632769"
          target="_blank">
          &copy; John D Reynolds
        </a>
      </p>
  </header>

---

---

（很抱歉，最初提出问题的人缺少代码）

您已经告诉您的图像，它的最大宽度应该是100%，这很好，但它不知道其父容器的大小。“相对大小”属性（如“最大宽度”）必须知道它们是相对于什么的，因此请尝试为img div容器提供宽度维度，例如：

#img-div {
  width: 400px;
  margin: 0% 0% 0% 0%;
}

---

祝FCC项目的其余部分好运

默认情况下，宽度计算中不包括边框和填充。在您的示例中，图像的内容框的宽度与容器的宽度相同，并且边框宽度添加在容器的顶部

通过向图像中添加

框大小：边框框

，可以获得所需的效果

---

您可以在“什么是CSS框模型？”一节中找到详细的解释。

这是因为图像的框大小。我的意思是，图像的默认框大小为内容框，使填充和边框不属于图像宽度的一部分，因此当添加边框时，它不会成为图像宽度的一部分，因此，它会使图像溢出

您只需将以下内容添加到您的

#图像中即可：

box-sizing: border-box;

填充和边框现在成为图像总宽度的一部分。
您可以在中更深入地阅读此主题。
您忘记了代码Lol代码在哪里？
box-sizing: border-box;