网站内容区域文本未完全左对齐问题求助

嘿，别担心，新手遇到这种小细节问题太正常了！我帮你排查了代码，问题主要和浏览器默认样式以及容器的内边距设置有关，咱们一步步解决：

问题原因 #

浏览器会给HTML元素（比如<p>标签）添加默认的用户代理样式，虽然<p>默认左右外边距为0，但结合你的布局，可能是以下两个点导致文本没有完全贴住.content容器左侧：

• <p>标签默认的上下外边距可能让你误以为左右有缩进（其实是视觉错觉），但如果确实有左右间距，那是因为容器或标签的内边距未清零
• .content容器没有明确设置内边距，不同浏览器可能存在隐含的默认内边距差异

解决方案 #

方案1：重置<p>标签的默认边距 #

直接给.content里的<p>标签清除所有默认边距，确保文本完全贴边：

.content p {
  margin: 0; /* 清除所有方向的默认外边距 */
  padding: 0; /* 清除所有方向的默认内边距 */
}

方案2：设置.content容器的内边距 #

如果你希望文本和容器边缘完全贴合，给.content添加padding: 0（覆盖浏览器默认可能存在的内边距）：

.content {
  background-color: rgba(255, 255, 255, 0.9);
  text-align: left;
  height: Calc(100vh - 182px);
  overflow: auto;
  padding: 0; /* 新增这行，强制清除容器内边距 */
}

额外说明（可选） #

你的.container设置了width:70%和margin:0 auto，这会让整个容器在页面中水平居中，所以.content的左侧会距离页面左侧有15%的留白（页面剩余30%宽度平分到左右），这是正常的居中效果。如果你的需求是让文本贴住页面最左侧，只需要把.container的margin:0 auto改成margin:0即可：

.container {
  margin: 0; /* 取消居中，让容器靠左 */
  width: 70%;
}

先试试前两个方案，应该就能解决文本未完全靠左的问题啦！

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