Html 由于flexbox，元素位置较高

我有两个相同的div，其中一个嵌套在额外的

中。在显示中，两个方块都位于其对等段落的旁边，但第一个方块比第二个方块在其各自段落的位置更高。flexbox的什么作用造成了这种差异

p{
页边顶部：1rem；
线高：1.85雷姆；
}
.flexbox{
显示器：flex；
}
.广场{
浮动：左；
页边顶部：1rem；
背景色：#cfc；
}

方格
一段放在正方形旁边

方格
一段放在正方形旁边

因为您的

div#first.square

与它旁边的

线条高度不同

p{
页边顶部：1rem；
线高：1.85雷姆；
}
.flexbox{
显示器：flex；
}
.广场{
浮动：左；
页边顶部：1rem；
线高：1.85雷姆；
背景色：#cfc；
}

方格
一段放在正方形旁边

方格
一段放在正方形旁边

这似乎是一个利润崩溃的问题

来自MDN：

块的顶部和底部边距有时合并（折叠）为单个边距，其大小为合并到其中的边距中最大的边距，这种行为称为边距折叠

资料来源：

在非flexbox示例中，子div的

页边距顶部

和容器div的

页边距顶部

折叠为一个页边距。这与块格式上下文中父级和子级之间的页边距折叠行为一致

请注意，默认情况下，div元素通常有一个

页边距顶部

，由浏览器应用。在用户代理样式的开发工具中查找它

您可以通过在容器上添加边框或填充来覆盖页边距折叠行为：

.flexbox{
显示器：flex；
}
#边界{
边框：1px红色虚线；
}
#填充物{
填充物：5px；
}
.广场{
浮动：左；
页边顶部：1rem；
背景色：#cfc；
边框：1px纯黑；
}
p{
页边顶部：1rem；
线高：1.85雷姆；
}

方格
一段放在正方形旁边

方格
一段放在正方形旁边

方格
一段放在正方形旁边

Set

margin:0到您的
p
，并在
p
和
.square中设置相同的
行高
。我知道正方形与段落的行高不同，出于一致性的原因，我想知道如何让flexbox中的正方形不升高。感谢您提供使用开发工具的提示！我会更加关注他们的。