'I can't vertically align to bottom a font size of several em values

I want G to stick to the bottom of it's parent. (G to the bottom of the white background).

body {
  position: relative;
  background: #ccc;
  font-size: 2em;
  padding: 3em;
}

.staff {
  display: flex;
  padding: 1em;
  background: white;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
}

.staff span {
  position: absolute;
  bottom: 0;
  font-size: 1.008em;
}

.clef {
background: pink;
  font-size: 0.25em;
  vertical-align: 'bottom';
}
<div class='staff'>
<span class='clef'>G</span>
</div>

I also tried display: flex; align-items: flex-end; but didn't work

javascripthtmlcss


Solution 1:[1]

body {
  position: relative;
  background: #ccc;
  font-size: 2em;
  padding: 3em;
}

.staff {
  display: flex;
  padding: 1em;
  background: white;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  
}

.staff span {
}

.clef {
  
  position: absolute;
  bottom: 0; 
  font-size: 1.008em;
  background: pink;
  line-height: 0.7;
  /* font-size: 0.25em; */
  vertical-align: "bottom";
}
<div class='staff'>
<span class='clef'>Good</span>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions