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 leave input file button usefull for drag and drop from desktop, but avoiding local redirection

    How to set alternating color to nested and sibling divs with certain class.

    HTML: Who takes care show/hide the scrollbar?

    How to match an element's background colour with 2 semi-transparent element background colours

    How to make hover gradient on a div element like on Wella.com?

    How to display the :after content outside element

    How to add a class to select_tag in Ruby on Rails

    CSS: how to make a horizontal images scroller with two images per column?

    StackLayoutPanel Shows white ends at the rounded corners

    How to use imported css styles in GWT correctly

    How to change only one function of CSS transform property w/ multiple functions?

    How to make dynamic picture boxes with text on bottom with css?

    How to prevent page margin from expanding in HTML/CSS code when window is resized

    How to Style Similar to an Exam Questi-n

    How do you make a make a page's worth of empty space (with only a title) followed by a div in CSS?

    How to target entire Bootstrap navbar

    How to inherit from ancestor and not parent in CSS?

    How to create a nested vertical menu with horizontally sub-menus using css

    How to set ASP dropdownlist to read only with css or javascript?

    How to persist local CSS change to server record?

    How to add the very last border on the sub menu items

    How to style the ScrollBar using CSS or Javascript? [duplicate]

    How to align lists and text side by side with div tags?

    Bootstrap css, how to make always visible navbar-toggle?

    How can I get the text style from window.selection()?

    How to manage textarea right side overflow in css?

    How do I make an `hr` with repeating small images?

    How to make one file compatible with different browsers?

    how can i prevent to take input onkeypress anything other than alphanumeric

    How to apply a property only to the submit button