Html 不知道为什么我的内联块元素会发生这种情况

我对CSS很陌生，在下面的代码中，我的计划是创建3个div元素并为它们设置样式。这是我的密码：

我的代码：

.box{
背景：橙色；
宽度：30%；
高度：250px；
利润率：0.1%；
显示：内联块；
}

---

在css文件的开头尝试以下操作：

* {
    box-sizing:border-box;
}

---

添加垂直对齐：顶部

.box

vertical-align:top;

.box{
背景：橙色；
宽度：30%；
高度：250px；
利润率：0.1%；
显示：内联块；
垂直对齐：顶部；
}

fhgf

我只是使用

网格框来处理您的问题，您也可以使用
柔性框来代替


.container{
显示：网格；
网格模板列：重复（3，1fr）；
}
.盒子{
背景：橙色；
宽度：90%；
高度：250px；
保证金：0.1%；

你好
嘿，老兄，谢谢你。这确实奏效了，但你能解释一下为什么会发生这个问题吗？比如为什么我需要使用这个？谢谢你，老兄，我想用我自己的代码来了解这个问题，作为学习的目的，但还是要感谢你！第一次列出了一个问题，我向你展示了处理该错误的其他方法如果你发现它有助于你投票，否则downvoteThis无法修复它，因为我的div元素没有边距/填充等。