Uvlačenja i em jedinice u CSS-u
Neka imamo sledeće tagove:
<div>
<p>
tekst
</p>
</div>
Neka je veličina fonta pasusa data u px:
p {
font-size: 20px;
}
Hajde da postavimo margin ovog pasusa u
jedinicama em. U ovom slučaju veličina
uvlačenja će se izračunavati od veličine fonta
pasusa, a ne od njegovog roditelja:
p {
font-size: 20px;
margin: 2em; /* odgovara 40px */
}
Neka je sada pasusu dodeljena veličina u em:
div {
font-size: 20px;
}
p {
font-size: 2em; /* odgovara 40px */
}
Hajde da ponovo postavimo margin našem
elementu. U ovom slučaju će se i dalje
računati od trenutne vrednosti fonta
samog elementa. Pritom će se sama vrednost fonta
računati u odnosu na roditelja:
div {
font-size: 20px;
}
p {
font-size: 2em; /* odgovara 40px */
margin: 2em; /* odgovara 80px */
}
Praktični zadaci
Neka imamo HTML kod, za koji ćemo rešavati zadatke:
<section>
<div>
<p>
tekst
</p>
</div>
</section>
Odredite, koja veličina fonta i uvlačenja
u px će imati tagovi div u
rezultatu izvršavanja sledećeg
koda:
section {
font-size: 10px;
}
div {
font-size: 2em;
margin: 2em;
}
Odredite, koja veličina fonta i uvlačenja
u px će imati tagovi div u
rezultatu izvršavanja sledećeg
koda:
section {
font-size: 10px;
}
div {
font-size: 2em;
margin: 3em;
}
Odredite, koja veličina fonta i uvlačenja
u px će imati tagovi div u
rezultatu izvršavanja sledećeg
koda:
section {
font-size: 10px;
}
div {
font-size: 2em;
margin: 0.5em;
}
Odredite, koja veličina fonta i uvlačenja
u px će imati tagovi p u rezultatu
izvršavanja sledećeg koda:
section {
font-size: 10px;
}
div {
font-size: 2em;
}
p {
font-size: 2em;
margin: 2em;
}
Odredite, koja veličina fonta i uvlačenja
u px će imati tagovi p u rezultatu
izvršavanja sledećeg koda:
section {
font-size: 10px;
}
div {
font-size: 1.5em;
}
p {
font-size: 1em;
margin: 1.5em;
}