CSS-de boşluklar we em ölçeg birlikleri

Bizde aşakdaky tegler bar diýeliň:

html<div>
  <p>
    text
  </p>
</div>

Abzasyň şrift ölçegi px birliginde berlen diýeliň:

cssp {
  font-size: 20px;
}

Geliň bu abzasyň marginini em birliklerinde belleýäli. Bu ýagdaýda boşlugyň ölçegi abzasyň şrift ölçeginden hasaplanar, onuň eýesinden däl:

cssp {
  font-size: 20px;
  margin: 2em;  /* 40px gabat gelýär */
}

Indi abzasa em birliginde ölçeg berlen diýeliň:

cssdiv {
  font-size: 20px;
}
p {
  font-size: 2em; /* 40px gabat gelýär */
}

Geliň ýene margin elementimize bereliň. Bu ýagdaýda ol öňki ýaly elementiň öz şrift bahasyndan hasaplanar. Şol bir wagtda şrift bahasynyň özi eýe baglylykda hasaplanar:

cssdiv {
  font-size: 20px;
}
p {
  font-size: 2em; /* 40px gabat gelýär */
  margin: 2em;    /* 80px gabat gelýär */
}

Amaly meseleler

Bizde HTML kody bar, üçin meseleleri çözeris:

html<section>
  <div>
    <p>
      text
    </p>
  </div>
</section>

Задание 1

Aşakdaky kody ýerine ýetirip bolandan soň, div tegleri px birliginde haýsy şrift we boşluk ölçegine eýe bolar:

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
  margin: 2em;
}

Задание 2

Aşakdaky kody ýerine ýetirip bolandan soň, div tegleri px birliginde haýsy şrift we boşluk ölçegine eýe bolar:

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
  margin: 3em;
}

Задание 3

Aşakdaky kody ýerine ýetirip bolandan soň, div tegleri px birliginde haýsy şrift we boşluk ölçegine eýe bolar:

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
  margin: 0.5em;
}

Задание 4

Aşakdaky kody ýerine ýetirip bolandan soň, p tegleri px birliginde haýsy şrift we boşluk ölçegine eýe bolar:

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
}
p {
  font-size: 2em;
  margin: 2em;
}

Задание 5

Aşakdaky kody ýerine ýetirip bolandan soň, p tegleri px birliginde haýsy şrift we boşluk ölçegine eýe bolar:

csssection {
  font-size: 10px;
}
div {
  font-size: 1.5em;
}
p {
  font-size: 1em;
  margin: 1.5em;
}