为什么图标和文本在同一行？ [复制]

Question

当我显示一个图标和一些文本时，我希望它们出现在同一行中。当我使用<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>

Answer 1

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>