Properties of vertical-align?

Question

Properties of vertical-align?




 the <title>Property vertical-align.</title>
<style>
#container{
 width: 400px;
 height: 100px;
 border: 1px solid black;
 padding: 2px; /* Set the inner indentation */
 margin: 0 auto; /* Rasmussen block center */
}
#container:before{
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 content: "";
 text-align: center;
}
p{
 line-height: 50px;
 font-size: 30px;
}

span{
 display: inline-block;
 vertical-align: bottom;
 font-size: 10px;
}
</style>



<p>asdasdasdasdasdasdasd<span>Ressfsdfsdf</span>asdasdasd</p>

Tell me why a string span does not fall to the bottom of the line . Which has a line height of 50px. Overcame the video on YouTube is there such a thing works.
I get so

CSS

Harrison_McLaughl asked June 10th 19 at 15:11

Related questions

More answers about "Properties of vertical-align?"

3 answers

Dominic_Ja answered on · Answer 1 · 2019-06-10T13:13:39.373Z

https://jsfiddle.net/daft82m5/

Rosendo_Hess answered on · Answer 2 · 2019-06-10T13:15:39.373Z

Rosendo_Hess answered on June 10th 19 at 15:15

have < p > line-height get

What then is different from the bottom text-bottom? - Harrison_McLaughl commented on June 10th 19 at 15:18

https://jsfiddle.net/daft82m5/ - Harrison_McLaughl commented on June 10th 19 at 15:21

bottom
Aligns bottom of element and its descendants with the bottom of the entire row

Well I prescribe at p line-height: 50px; And I understand it must fall below. But I wrote get line-height: 50px; Maybe I do not understand? - Harrison_McLaughl commented on June 10th 19 at 15:24

peter.Armstro answered on · Answer 3 · 2019-06-10T13:17:39.373Z

#container{
 width: 400px;
 height: 100px;
 border: 1px solid black;
 padding: 2px; /* Set the inner indentation */
 margin: 0 auto; /* Rasmussen block center */
}
#container:before{
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 content: "";
 text-align: center;
}
p{
 font-size: 30px;
}

span{
 display: inline-block;
 vertical-align: bottom;
 font-size: 10px;
 }

https://jsfiddle.net/mc0p5uh7/