Fungsi calc

Fungsi calc memungkinkan untuk melakukan perhitungan nilai properti CSS. Fungsi ini menerima ekspresi matematika sebagai parameter, yang hasil perhitungannya dapat digunakan sebagai nilai properti CSS. Ekspresi dapat mencakup operator +, -, *, /.

Sintaks

cssselektor {
  properti: calc(ekspresi);
}

Contoh

Mari kita buat lebar blok menjadi sama dengan 100% dari lebar induk, dikurangi 50px:

html<div id="parent">
  <div id="child"></div>
</div>

css#child {
  width: calc(100% - 50px);
  height: 100px;
  margin: 0 auto;
  border: 1px solid red;
}
#parent {
  border: 1px solid green;
}

Результат:

Lihat juga