How to align text vertically equal top CSS - html

Question

I am trying to align the text vertically equal using css, but there is some sort of space in the right side span.
Have added the code and fiddle link.
p{
clear: both;
margin: 0;
padding: 0;
display: table;
}
span.blue{
background: blue;
}
span.green{
background: green;
}
span.black{
background: black;
}
span.circle{
width: 15px;
height: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
display: inline-block;
margin-right: 12px;
/* float: left; */
vertical-align: top;
}
span.desc{
/* float: left; */
width: 115px;
vertical-align: top;
display: inline-block;
}
<div class="container">
<p>
<span class="blue circle"></span>
<span class="desc">Blue text</span>
</p>
<p>
<span class="green circle"></span>
<span class="desc">Green text</span>
</p>
<p>
<span class="black circle"></span>
<span class="desc">black text</span>
</p>
</div>
Fiddle Link

Answer 1

I think I see the small misalignment you're talking about. Is this better ? I aligned both the cirlce and the text using
vertical-align: middle;
instead of
vertical-align: top;
Edit
As vertical-align: top has to be kept, I instead added a margin-top: 2px to the circles. This places them at the same height as the text and both are still aligned at top.
p{
clear: both;
margin: 0;
padding: 0;
display: table;
}
span.blue{
background: blue;
}
span.green{
background: green;
}
span.black{
background: black;
}
span.circle{
width: 15px;
height: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
display: inline-block;
margin-right: 12px;
/* float: left; */
vertical-align: top;
margin-top: 2px;
}
span.desc{
/* float: left; */
width: 115px;
vertical-align: top;
display: inline-block;
}
<div class="container">
<p>
<span class="blue circle"></span>
<span class="desc">Blue text</span>
</p>
<p>
<span class="green circle"></span>
<span class="desc">Green text</span>
</p>
<p>
<span class="black circle"></span>
<span class="desc">black text</span>
</p>
</div>

Answer 2

Use vertical-align: middle or you can use the same line-height and font-size to solve the issue as in the snippet below.
p span {
font-size: 16px;
line-height: 16px;
}
Explanation:
Keeping the same line-height and font-size will ensure that vertical-align: top will work perfectly fine.
snippet below:
p{
clear: both;
margin: 0;
padding: 0;
display: table;
}
span.blue{
background: blue;
}
span.green{
background: green;
}
span.black{
background: black;
}
span.circle{
width: 15px;
height: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
display: inline-block;
margin-right: 12px;
/* float: left; */
vertical-align: top;
}
span.desc{
/* float: left; */
width: 115px;
vertical-align: top;
display: inline-block;
}
p span {
font-size: 16px;
line-height: 16px;
}
<div class="container">
<p>
<span class="blue circle"></span>
<span class="desc">Blue text</span>
</p>
<p>
<span class="green circle"></span>
<span class="desc">Green text</span>
</p>
<p>
<span class="black circle"></span>
<span class="desc">black text</span>
</p>
</div>

Answer 3

Your issue looks to be that the height of the text is greater then that of the circle. Flexbox could help with this, make the p display flex and set the circles to align center.
p{
clear: both;
margin: 0;
padding: 0;
display: flex;
}
span.blue{
background: blue;
}
span.green{
background: green;
}
span.black{
background: black;
}
span.circle{
align-self:center;
width: 15px;
height: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
display: inline-block;
margin-right: 12px;
/* float: left; */
vertical-align: top;
}
span.desc{
/* float: left; */
width: 115px;
vertical-align: top;
display: inline-block;
}