css网格输入大小增加

关于css网格，我有几个问题

为什么标签和输入的大小与网格的行高匹配并填充它

为什么标签和输入元素在css网格中显示为块，而在简单div中显示为内联元素

为什么浏览器会忽略将其显示覆盖为内联显示

以下是一个例子：

.wrapper{
背景颜色：紫色；
显示：网格；
网格模板列：1fr 4rem 4rem 1fr；
}
.wrapper>标签{
显示：内联；
网格柱：2；
背景颜色：绿色；
}
.wrapper>输入[类型=复选框]{
网格柱：3；
边框：1px纯红；
背景颜色：灰色；
}
.wrapper>输入[类型=文本]{
网格柱：4；
外形：2倍纯黄色；
}
.简单{
宽度：50px；
高度：100px；
背景颜色：蓝色；
}
.simple>标签{
高度：50px；
}
.wrapper 2{
背景颜色：灰色；
显示：网格；
网格模板行：100px；
网格自动行：100px；
网格模板列：1fr 8rem 8rem 1fr；
}
.wrapper2>标签{
网格柱：2；
显示：内联；
背景颜色：绿色；
}
.wrapper2>输入[类型=复选框]{
网格柱：3；
背景颜色：黄色；
边框：1px纯色灰色；
}
.wrapper2>输入[类型=文本]{
网格柱：4；
外形：2倍纯黄色；
边框：1px纯色灰色；
}

长标签
长标签
长标签

1。为什么标签和输入的大小与网格的行高匹配并填充？

因为高度是

auto

，所以在CSS网格中

auto

被拉伸。由于对齐属性

align items

和

justify content

的默认值

stretch

，我们可以覆盖以下内容：

对齐项目：块轴（垂直）中的弹性开始

justify content:flex start

位于内联轴（水平方向）

[网格]{
背景：橙色；
显示：内联网格；
网格模板列：50px；
网格模板行：50px；
}
[网格]>div{
背景：红色；
高度：自动；
}
[修正]{
调整项目：灵活启动；
调整项目：弹性启动；
}
[grid]>[notAuto]{
高度：30px；
宽度：30px；
}

对齐项目：拉伸；调整项目：拉伸；（默认）
正文
调整项目：灵活启动；调整项目：弹性启动；
正文
指定宽度/高度时（非自动）
正文