Min-height häsiýeti

min-height häsiýeti elementyň iň pes beýikligini belgileýär. Häsiýetiň bahasy bolsa ölçeg birlikleriniň islendik görnüşi ýa-da baha ýoklugyny aňladýan none açar sözi bolup biler.

Esasan, üzýükli ini (beýiklik göterimlerde berlen ýa-da umuman berlen däldir, element beýikligi bolsa mazmuny bilen ýaýradylyp durýar) element üçin berilýär.

Eger iň pes beýiklik berlen bolsa - onda element bu beýiklikden peselip bilmez. Eger tekst min-height üçin zerur bolandan az bolsa, element min-height beýiklige eýe bolar.

Eger tekst köp bolsa - elementiň beýikligi tekstiň mukdaryna baglylykda hasaplanar.

Sintaksis

cssselektor {
  min-height: baha;
}

Mysal

Bu mysalda beýiklik umuman berlen däl we brauzer tarapyndan özbaşdak suratda tekstiň mukdaryna baglylykda hasaplanar. Emma, min-height häsiýeti berlendigi üçin, beýiklik bu bahadan peselip bilmez, hatda onuň içinde tekst ýok bolsa hem:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  min-height: 100px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Mysal

Elemente has köp tekst goşalyň - şeýlelik bilen, blok beýikligi boýunça daşlyk ýüze çykar. Bu ýagdaýda biziň blokymyz diňe öz beýikligini artdyrar:

html<div id="elem">
  some long text
</div>

css#elem {
  min-height: 100px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Mysal

Salyşdyrmak üçin, blok bilen näme boljakdygyna göz aýlap göreli, eger ondan iň pes beýiklik aýyrylsa, onuň ornuna height häsiýeti berlen bolsa:

html<div id="elem">
  some long text
</div>

css#elem {
  height: 100px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
  margin-bottom: 50px;
}

Результат:

Hem görüň