CODEWITHSUNDEEP
htmlcss
user4752928
user4752928

Reputation:

Icon and padding

bob i {font-size: 10px} shows a neat horizontal block, and the name titles are aligned. When I increase the font-size for bob i to 30px, then the two spans are not neatly horizontally aligned anymore. The icon is not that big so why does it make the bob span block blow up? Is it possible to have bob i {font-size: 40px} and keep everything neatly horizontally aligned?

.joe span
{
    display: block;
    padding: 20px;
    text-align: left;
}
.pete
{
 width: 30%;
 float: left;
 background-color: green;
}
.bob
{
 width: 10%;
 float: left;
 background-color: blue;
}
.bob i {
  font-size: 30px;
  padding-left: 10%;
}
<div class="wrapper"><div class="joe"><span class="pete">Pete</span> 
<span class="bob">Bob<i class="icon">@</i></span>
</div></div>

Upvotes: 0

Views: 51

Answers (1)

Elvin Mammadov
Elvin Mammadov

Reputation: 1120

Just change these class property

.joe span {
    display: flex;
    align-items: center;
    padding: 20px;
}
.bob i {
  font-size: 40px;
  padding-left: 10%;
  line-height: 0;
}


.joe span {
    display: flex;
    align-items: center;
    padding: 20px;
}
.pete
{
 width: 30%;
 float: left;
 background-color: green;
}
.bob
{
 width: 10%;
 float: left;
 background-color: blue;
}
.bob i {
  font-size: 40px;
  padding-left: 10%;
  line-height: 0;
}
<div class="wrapper"><div class="joe"><span class="pete">Pete</span> 
<span class="bob">Bob<i class="icon">@</i></span>
</div></div>

Upvotes: 2

Related Questions