![]() ![]() It has a baseline, a text box and a top and bottom edge. This is the area in which vertical alignment takes place. Let’s quickly sum up the most important facts: Now, we know everything to put things into perspective. (Side note: this text box is called strut in the W3C Specs) Since this text box is tied to the baseline, it moves when the baseline moves. The box is indicated by the green lines in the figures above. Therefore, the text box only just encloses the unformatted text of the line box. Its height is equal to the font-size of its parent element. The text box can simply be thought of as an inline element inside the line box without any alignment. If this character is not aligned in any way, it will sit on the baseline by default.Īround its baseline the line box has what we might call its text box. Just add a character at the beginning of the line in questions, like I added an “x” in the figure. But, you can make it visible very easily. Since the line box’s baseline is invisible, it may not immediately be obvious where it is. It means, the baseline is placed where ever it needs to be to fulfil all other conditions like vertical-align and minimizing the line box’s height. This is probably the most confusing part, when working with vertical-align. ![]() This is the box indicated by the red lines in the figure above.ĬSS 2.1 does not define the position of the line box's baseline. The line box has a top edge aligned to the top edge of the top-most element of this line and a bottom edge aligned to the bottom edge of the bottom-most element of the line. I also highlighted the area of the text elements by giving them a grey background. This time I drew in the top and bottom of the line box’s text box (green, more on this below) and the baseline (blue), too.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |