Unit ng CSS

Unit ng CSS

May iba't ibang uri ng unit ng haba na pwedeng gamitin sa CSS.

Maraming CSS property ay tumatanggap ng halaga ng haba, tulad ng width,margin,padding,font-size atb.

Ang haba ay isang numero na may kasamang length unit, tulad ng 10px,2em atb.

Mga halimbawa

Gamitin ang px (pixel) para sa iba't ibang halaga ng haba:

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

Magsubukang i-test personal

Hindi dapat magkaroon ng puwang ang numero at ang unit. Subalit, kung ang halaga ay 0, maaaring iwanan ang unit.

Para sa ilang CSS property, pinapayagan ang paggamit ng nagiging negatibo ng haba.

May dalawang uri ng length unit:Absolute unitatRelative unit.

Absolute length

Ang absolute length unit ay estableng, ang haba na inaangkin ng anumang absolute length ay magiging eksaktong laki.

Hindi inirerekomenda ang paggamit ng absolute length unit sa screen dahil ang laki ng screen ay lubhang malaki. Gayunman, kung kilala ang kagamitan ng paglathala, maaaring gamitin sila, halimbawa, para sa layout ng paglathala (print layout).

Bilang Paglalarawan TIY
cm Sentimetro Try It
mm Milya Try It
in Inch (1in = 96px = 2.54cm) Try It
px * Pixel (1px = 1/96 ng 1in) Try It
pt Point (1pt = 1/72 ng 1in) Try It
pc Pica (1pc = 12 pt) Try It

* Pixel (px) ay katulad ng kagamitan ng tinitingnan. Para sa mga kagamitan na may mababang dpi, 1px ay isang device pixel (point) ng monitor. Para sa printer at mataas na resolyusyong screen, 1px ay nangangahulugang maraming device pixel.

Relative length

Ang relative length unit ay naituturing na ang haba ay katulad ng isa sa ibang length property. Ang relative length unit ay nagpapakita ng mas mabuting pagkakasala sa pagkatapos ng iba't ibang medium ng pagpalabas.

Bilang Paglalarawan TIY
em Higit sa laki ng font ng elemento (2em ay nangangahulugang 2 beses ng kasalukuyang laki ng font) Try It
ex Higit sa x-height ng kasalukuyang font (kaunti lamang gamit) Try It
ch Higit sa lapad ng "0" Try It
rem Higit sa laki ng font ng pangunahing elemento Try It
vw Higit sa 1% ng lapad ng viewport Try It
vh Higit sa 1% ng taas ng viewport Try It
vmin Higit sa 1% ng mas maliit na laki ng viewport Try It
vmax Relative to the Larger Size of the Viewport * 1% Try It
% Relative to the Parent Element Try It

Tip:em and rem units can be used to create perfect scalable layouts!

* Viewport (Viewport) = Browser Window Size. If the viewport is 50 centimeters wide, then 1vw = 0.5 centimeters.

Browser Support

The numbers in the table indicate the first browser version that fully supports this length unit.

Length Unit
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0