Issue
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>
Solution
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>
Answered By - kukkuz Answer Checked By - David Marino (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.