为什么图标和文字在同一行？

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>

为什么图标和文字在同一行？

Why do the icon and text come in same line?

html

css

google-material-icons