HTML4中Section标签构建电影列表首行无法对齐的问题

嗨，这种浏览器默认样式搞出来的小问题太常见了！别着急，咱们一步步搞定它。

问题出在哪？ #

现代浏览器都会自带一套「默认样式表」，会给article、section、h3这些元素自动加margin、padding甚至文本缩进。你的第一行偏移，大概率是第一个section或者里面的h3继承了浏览器给父元素（比如article）加的默认边距，而后面的section刚好抵消了这个样式，就出现了错位。

快速修复代码 #

直接给你的元素加上样式重置，强制统一所有项的布局：

/* 先清除浏览器自带的默认边距、内边距和文本缩进 */
article#movies, 
#movies section, 
#movies h3 {
  margin: 0;
  padding: 0;
  text-indent: 0;
}

/* 可选：给每个section加个底部间距，让列表更清爽 */
#movies section {
  margin-bottom: 0.5em;
}

精准排查小技巧 #

如果你想搞清楚到底是哪个样式在捣乱，可以用浏览器的开发者工具（按F12就能打开）：

• 选中第一行的<h3>Three Weeks (1924)</h3>
• 切换到「Elements」面板的「Computed」标签，查看margin-left、padding-left、text-indent这些属性
• 对比第二行h3的计算样式，一眼就能找到差异，再针对性调整就行

额外提醒 #

别忘了检查你包裹代码的div容器——如果div本身设置了padding-left或者text-indent，也可能影响子元素的对齐哦。

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