CSS 9 💻 text indent, vertical align, text align last, direction properties

text-indent → controls the  indentation to the first line of a block element
values → length values (mm, px), percentage values (%) and global values(inherit, initial etc)
example 1 →  Indents the first line of text by 40 pixels
example 2 → Removes any indentation from the first line of text
vertical-align → aligns the inline/inline-block/table cell element vertically inside its parent
values  →  baseline, sub, super, text-top, text-bottom, middle...
top, bottom and of course length(em, px etc) and percentage values (%)
example 1 → centers the child elements vertically
example 2 → centers these elements with their parent (the .container div) vertically

text-align-last → controls the alignment of the last line of text within a block element
values → start, end, left, right, center, justify and global values(inherit, initial...)
example 1 → aligns the last line of the paragraph to the left
example 2 → aligns the last line of the paragraph to the right
direction → controls the the text direction within a block element
values → ltr, rtl and global values(inherit, initial...)
example 1 →  This will make the text read from left to right
example 2 →  this will make the text read from right to left 

9 – text-indent, vertical-align, text-align-last, direction properties

<p class="indented">This paragraph has a left indentation of 40 pixels.</p>
<p class="no-indent">This paragraph does not have any indentation.</p>
<div class="container">
    <span class="inline">This is a span with <span style="font-size: 20px; vertical-align: top;">top</span> alignment.</span>
    <span class="inline">This is another span with middle alignment.</span>
    <span class="inline">This one has bottom alignment.</span>
</div>

<p class="left-aligned-last">This is a paragraph that will be left aligned with the last line of text. It's quite long and has a bunch of words to demonstrate how this property works.</p>
<p class="right-aligned-last">This paragraph will have its last line right aligned. Again, it is quite long and has more words than the previous one.</p>

<div class="ltr">This is a left-to-right language (e.g., English) block.</div>
<div class="rtl">This is a right-to-left language (e.g., Arabic, Hebrew) block.</div>

p.indented {
    text-indent: 40px; 
    font-size: 18px;
}

p.no-indent {
    text-indent: none; 
    font-size: 18px;
}

.container {
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
}

.inline {
    display: inline-block; 
    vertical-align: middle; 
    margin-right: 20px; 
}

p.left-aligned-last {
    text-align: justify; 
    text-align-last: left; 
    font-size: 18px;
    border: 1px solid #ddd;
}

p.right-aligned-last {
    text-align: justify;
    text-align-last: right;
    font-size: 18px;
    border: 1px solid #ddd;
}

div.ltr {
    direction: ltr;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

div.rtl {
    direction: rtl;
    border: 1px solid #ddd;
}