如何修复CSS grid网格内部内边距，使h3标题贴合网格底部

问题原因 #

• 你引入的Bootstrap框架默认给<h3>标签设置了margin-bottom属性，仅清除内边距（padding）无法消除该间隙
• 浏览器原生也会为h系列标题设置默认上下外边距，叠加后就出现了底部的微小缝隙

解决方法 #

修改.recipe h3的CSS规则，手动清除默认外边距即可：

.recipe h3 {
  background-color: rgb(230, 230, 230);
  width: 50vw;
  padding-left: 20px;
  height: 100px;
  /* 新增这行清除默认外边距 */
  margin: 0;
  /* 可选添加：让标题文字在灰色容器内垂直居中 */
  line-height: 100px;
}

如果不需要食谱卡片顶部的20px留白，也可以删除.recipe规则里的padding: 20px 0px 0px 0px;，不影响底部贴合效果。

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