div内图片加边距后溢出容器，如何让其适配375px宽度？

问题描述 #

正在完成Frontend Mentor的HTML/CSS挑战，实现QR码展示布局。给白色div（.tile）内的图片添加margin:10px后，图片在底部和右侧溢出了设置为375px宽的容器，期望图片能带着边距适配该div。

当前效果示意图：

原因分析 #

默认CSS盒模型中，元素的width仅代表内容宽度，margin、padding、border都会额外增加元素的总占用宽度。你给图片设置了10px的margin，加上图片自身的原始宽度，总宽度就超过了父容器.tile的375px，因此出现溢出。

解决方案 #

这里提供三种简单可行的方法，任选其一即可：

方法1：给父容器添加padding，移除图片的margin #

把图片的margin转移到父容器的padding上，配合box-sizing:border-box让父容器的宽度包含padding，图片设为100%宽度即可自适应：

.tile {
  background-color: hsl(0, 0%, 100%);
  margin: auto;
  text-align: center;
  width: 375px;
  padding: 10px; /* 替代图片的margin */
  box-sizing: border-box; /* 让width包含padding和border */
}
.tile img {
  width: 100%; /* 图片自适应父容器宽度 */
}

方法2：用calc计算图片宽度 #

直接让图片宽度等于父容器宽度减去左右margin的总和，确保总占用宽度不超过375px：

.tile img {
  margin: 10px;
  width: calc(100% - 20px); /* 减去左右各10px的margin */
}

方法3：用max-width限制图片最大宽度 #

设定图片的最大宽度为父容器宽度减去margin总和，避免溢出：

.tile img {
  margin: 10px;
  max-width: calc(375px - 20px); /* 375是父容器宽度，20是左右margin总和 */
  display: block; /* 消除inline元素默认的额外间距 */
}

修改后的完整代码示例（以方法1为例） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <title>Frontend Mentor | QR code component</title>

  <style>
    body { background-color: hsl(212, 45%, 89%); }
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
    .tile { 
      background-color: hsl(0, 0%, 100%); 
      margin: auto; 
      text-align: center; 
      width: 375px; 
      padding: 10px;
      box-sizing: border-box;
      border-radius: 16px; /* 可选：贴近设计稿添加圆角 */
    }
    .tile img {
      width: 100%;
      border-radius: 8px; /* 可选：给图片加圆角 */
    }
    /* 可选：优化文本样式更贴近设计 */
    .tile h3 {
      color: hsl(218, 44%, 22%);
      font-weight: 700;
      margin: 16px 0 12px;
    }
    .tile p {
      color: hsl(220, 15%, 55%);
      font-size: 15px;
      margin: 0 16px 20px;
    }
  </style>
</head>
<body>
  <div class="tile">
    <img src="./images/image-qr-code.png" alt="QR code">
    <h3>Improve your front-end skills by building projects</h3>
    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="#">Joshua</a>.
  </div>
</body>
</html>

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