如何实现图片左对齐并消除留白？是否受Bootstrap影响？

嘿，我来帮你搞定这个问题！首先你的怀疑完全正确——Bootstrap确实大概率是干扰源，尤其是你用了和它内置类重名的container，这绝对会搞乱你的样式。另外浏览器的默认样式也可能添乱，咱们一步步来解决：

一、先解决Bootstrap的核心冲突 #

Bootstrap自带一个.container类，有默认的左右内边距和最大宽度设置，你自定义的.container和它重名了，两种样式混在一起，必然会出现意料之外的留白。

解决方法：把你的自定义容器类名改掉，比如换成custom-container，彻底避免类名冲突。

二、清除全局默认留白 #

哪怕不用Bootstrap，浏览器的默认样式（比如body自带的8px外边距）也会让页面四周出现留白，所以先重置全局样式：

/* 重置浏览器默认的全局边距 */
body {
  margin: 0;
  padding: 0;
}

三、优化布局代码，实现图片左对齐+无留白 #

你的现有CSS有一些冗余和无效属性（比如align:left不是合法的CSS属性），我帮你调整了代码，确保图片完全左对齐且无留白：

修改后的HTML（已替换容器类名） #

<section class="termine">
  <div class="custom-container">
    <img class="img" src="https://www.buildinglogix.net/wp-content/uploads/2017/01/BLX_Homepage-Banner.jpeg" alt="image building">
  </div>
  <h1 class="text1">Chi sono</h1>
</section>

修改后的CSS #

/* 先重置全局样式 */
body {
  margin: 0;
  padding: 0;
}

.termine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

.custom-container {
  width: 1290px;
  margin: 0;
  padding: 0;
}

.img {
  display: block;
  width: 100%; /* 让图片自适应容器宽度，避免固定宽度导致的溢出或留白 */
  margin: 0;
  padding: 0;
  border: none;
}

关键细节说明 #

• 给.termine加上top:0; left:0;，确保它完全贴合页面左上角，消除任何偏移导致的留白。
• 图片用width:100%代替固定的1290px，既能保证和容器宽度一致，又能避免容器宽度变化时出现留白或溢出。
• 如果确实在使用Bootstrap，记得先引入Bootstrap的CSS，再引入你的自定义CSS，这样你的自定义样式才能覆盖Bootstrap的默认样式。

额外排查技巧 #

如果还是有留白，打开浏览器开发者工具（按F12），选中图片或容器元素，查看「盒模型」面板，就能清楚看到margin/padding是来自哪里的——是Bootstrap的样式，还是浏览器默认样式，一目了然。

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