În MS Word sau alte procesoare de text este uşor să realizezi indentarea (scris cu aliniat, cum se spune în popor sau alinierea textului pe lângă listele de numere sau buline, astfel încât să nu „alunece” şi sub simbolul respectiv, număr/bulină). Astfel, după cum se vede în figură, numele facultăţii, fiind mai lung, sintagma „Ştiinţe Politice” ar ajunge sub simbolul clădirii.
Textul HTML ar arăta cam aşa, remarcându-se că nu am folosit paragrafe (ar crea distanţare prea mari între rânduri şi ar mai fi nevoie de ajutor pentru a micşora acel spaţiu):
HTML
<i class="fa fa-user"></i> Director: Ion Dumitrescu, <br>
<i class="fa fa-graduation-cap"></i> profesor. universitar dr. <br>
<i class="fa fa-building"></i> Facultatea de Comunicare şi<br> Ştiinţe Politice<br>
<i class="fa fa-building-o"></i> Departamentul de Psihologie <br>
<i class="fa fa-phone"></i> + 021 220 1293 <br>
<i class="fa fa-envelope"></i> iondumi@fcsp.ro
Pentru că simbolul primei linii din paragraf ar risca să migreze prea mult spre stânga, din cauza lui „text-indent:-22px” şi să nu se vadă, am compensat cu pseudo-elementul „::first-line” care va fixa prima linie a paragrafului la 0, după cum reiese din exemplificarea de mai jos.
CSS
.widget {
font-family: 'Archivo Narrow', sans-serif;
padding-left: 22px ;
text-indent: -22px ;
color:black;
}
.widget::first-line {
text-indent: 0px ;
}
