默认情况下，
当我显示一个图标和一些文本时，我希望它们位于同一行。当我使用<div>标签时，我可以实现这一点。然而，当我使用<p>标签时，它并没有实现。为什么会这样？
.container {
display: flex;
}
i {
color: black;
}<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<i class="material-icons">call</i>
<!-- <div>9988998899</div> -->
<p>9988998899</p>
</div>p标记有一个margin值，需要重置或设置align-items属性。同样使用div标记，您会注意到元素是根据其顶部边界对齐的(不在一行中(，这可以通过align-items:实现
.container {
display: flex;
outline: 1px solid orange;
}
.c1 p {
margin: 0;
}
.c2, .c4 {
align-items: center;
}<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<pre>// p with margin: 0</pre>
<div class="container c1">
<i class="material-icons">call</i>
<p>9988998899</p>
</div>
<pre>// p without margin: 0, but align-items:center</pre>
<div class="container c2">
<i class="material-icons">call</i>
<p>9988998899</p>
</div>
<pre>// div without align-items:center</pre>
<div class="container c3">
<i class="material-icons">call</i>
<div>9988998899</div>
</div>
<pre>// div with align-items:center</pre>
<div class="container c4">
<i class="material-icons">call</i>
<div>9988998899</div>
</div>