How to align text vertically equal top CSS


Tags: html,css

Problem :

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



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>


    CSS Howto..

    How to refer to an id with special characters in CSS

    How to show scrollbar when the inner content is aligned to bottom?

    CSS Bootstrap AngularJS - How to reduce table row height?

    How to use jQuery to check if element breaks to the next line?

    How not to override property in CSS

    How to apply CSS styles to links that appear in table headers?

    How to add space between border line and menu item

    how to align button radio in css

    Overwriting a CSS Class How to?

    How to fake width animation with CSS transform?

    How can I make a scrolling DIVs background transparent?

    How to hide text using CSS?

    How to manage two different size of textarea box in css

    How can I push the first row of images down?

    How to make an arrow in html5 or css

    How to change the current link color in navigation bar

    How can I layout a sidebar or pullquote?

    How does Outlook.com have the title text underlined?

    How to position HTML code over CSS

    How to prevent long text from flowing out of a container

    How can CSS have a significantly negative effect on page paint time in a specific area of a web page?

    How to set the background-image of this text to an svg?

    Animated HTML,CSS JavaScript. How can I implement this [closed]

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How to vertically center text overlapping an image?

    Having 2 css code blocks in html files how to make only one work using JS?

    How put div element to bottom of another div element

    How can I stop a css background resizing to fit the browser window?

    How to speed up a slow loading PHP page that is processing several large arrays?

    How can I add specific css id to parent menu with php or javascript