CSS Grid布局中子项设置margin-bottom仅推开下方元素问题求助

问题原因 #

• 你对margin的作用认知有误：margin是元素的外部间距，用于控制当前元素和其他相邻元素/行的距离，不会改变元素自身内部的留白；你要的元素自身内容和自身边界的间距属于内部间距，需要用padding实现。
• 其次CSS Grid容器默认的align-items属性值为stretch，会自动将所有网格项拉伸至占满所属网格单元格的高度，所以即使你给第三个项加了底部外边距，也只会撑开它所在行和下方第四项所在行的间距，表现为仅把第四项向下推。

解决方案 #

场景1：需要第三个div底部的空白和div本身背景色一致 #

把.third-story的margin-bottom:100px改成padding-bottom:100px即可，修改后的代码如下：

.third-story
{
  grid-column-start: 2;
  grid-column-end: 3;
  padding-bottom:100px;
}

场景2：需要第三个div底部的空白显示网格容器的白色背景 #

给.third-story新增align-self: start属性，保留原有margin-bottom即可，修改后的代码如下：

.third-story
{
  grid-column-start: 2;
  grid-column-end: 3;
  margin-bottom:100px;
  align-self: start;
}

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