1

When I display an icon and some text along with it, I want them to come in the same line. I can achieve this when I use the <div> tag. However, it isn't achieved when I use the <p> tag. Why so?

.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>
Azametzin
  • 5,223
  • 12
  • 28
  • 46
user185887
  • 643
  • 6
  • 18

1 Answers1

2

The p tag by default has a margin value which you need to reset, or set the align-items property. With div tags also, you will notice that the elements are aligned according to their top borders (not in line), which you can achieve with 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>
Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43