Home why the first two icons's line-height does not work in chrome?
Reply: 0

why the first two icons's line-height does not work in chrome?

user1540
1#
user1540 Published in July 21, 2018, 1:48 pm

it works fine here, but when i move the code to separate html and css files,and run it in chrome browser, the first 2 icons get higher than the third ,like this in the image:
the image

and my question is : why the first two icons’s line-height does not work in chrome? and result in the first two icon is taller than the third icon, how to fix that? i just want to align the icons horizontally

.box {
  padding: 12px 24px;
  display: block;
  float: left;
  line-height: 1.5;
  font-size: 32px;
}
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
    </head>
    <body>
        
    <div class="theme-bar"><a class="box"><i class="fas fa-globe"></i></a><a class="box"><i class="fas fa-user"></i></a><a class="box"><i class="fas fa-bell"></i><span>3</span></a>
</div>
    </body>
</html>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.31531 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO