HTML新手求助：为table设置margin-bottom:1em不生效如何解决

解决方法 #

首先你标注的样式添加位置是完全正确的，直接在table对应的CSS规则块中添加margin-bottom: 1em;即可：

table {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 2em;
  margin-bottom: 1em; /* 新增这行 */
  text-align: center;
  border: 10px solid navy;
}

样式“不生效”的常见原因 #

1. 无参照物验证：如果你的<table>是页面的最后一个元素，底部没有其他内容做对比，自然看不到1em的留白效果，你可以在</table>后面随便加一行文本比如<p>测试内容</p>，就能明显看到表格和下方文本的间距。
2. 外边距折叠：如果表格是<body>的最后一个子元素，表格的底部外边距会和body的默认外边距发生折叠，视觉上看不出变化。可以给<body>的CSS规则加一行padding-bottom: 1px即可解决折叠问题，让margin效果正常显示。
3. 视觉混淆：你当前的body背景是白色，表格的底部外边距如果落在body的白色范围内，没做边界标记的话很难看出差异，你可以打开浏览器F12开发者工具，选中table元素查看「盒模型」面板，就能直接确认margin-bottom是否已经被正确应用。

注意你现有CSS代码底部的注释要求下方内容不能修改，你把样式加在上方的table规则块里完全符合作业要求，不会触及禁止修改的代码范围。

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