Some text some message..
Some text some message..
Some text some message..
Some text some message..

Satuan Ukuran em Pada CSS

previous Previous Page

Satuan ukuran em pada CSS merupakan satuan ukuran dengan sifat relative yang nilainya bergantung pada nilai besar huruf (font size) dari elemen induknya. Satuan em tidak memiliki ukuran yang penuh dan pasti. Nilainya benar-benar tergantung pada ukuran besar huruf (font size) yang aktif. Ukuran font size bisa ditetapkan dalam bentuk satuan px, pt, mm, cm, in dan lainnya. Dan ukuran em mengikuti satuan aktif yang sudah ditetapkan sebelumnya sebagai satuan bakunya.

Satuan em disini bukanlah merupakan singkatan, jadi tidak akan mempunyai kepanjangan kata. Tapi bersifat sebagai pengucapan pada huruf "M". Huruf "M" merupakan unit yang biasa digunakan dalam pengukuran pada ilmu typography. Huruf "M" ditetapkan sebagai titik ukur aktif (point) dari lebar normal pada huruf besar M. Sebagai contoh, huruf dengan nilai 12 point, maka 1em adalah setara dengan jarak dari 12 point dan 2em adalah setara dengan jarak dari 2 x 12 point (24 point).

Pada penggunaan satuan em pada CSS, jika elemen yang aktif memiliki font size sebesar 18px maka nilai 1em akan sebesar 18px dan 2em-nya adalah 2 x 18px (32px). Jika font size yang aktif sebesar 2cm maka nilai 1em adalah 2cm. Jika font size yang aktif sebesar 2in maka nilai 1em adalah 2in.

Sintaks ukuran em :

tipe_property: xem;

Nilai x adalah nilai dalam bentuk numeric (angka). Nilai x bisa dalam bentuk nilai desimal ataupun non-desimal.

Sebagai contoh :

font-size: 1.25em;
margin: 0.75em;
padding: 0.5em;
text-indent: 1em;

Menggunakan Satuan em Pada Ukuran Huruf

Ukuran huruf dapat diatur dengan menggunakan satuan em. Pada huruf dengan ukuran font sebesar 20px, maka 1em akan setara dengan nilai 20px. Nilai tersebut akan relatif terhadap nilai acuan 20px saat besaran nilai em-nya diperbesar maupun diperkecil.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
   <title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
   <div style="font-size:20px;">Div huruf ukuran 20px
    <p style="font-size:0.25em;">P huruf ukuran 0.25em dari 20px</p>
    <p style="font-size:0.5em;">P huruf ukuran 0.5em dari 20px</p>
    <p style="font-size:0.75em;">P huruf ukuran 0.75em dari 20px</p>
    <p style="font-size:1.25em;">P huruf ukuran 1.25em dari 20px</p>
    <p style="font-size:1.25em;">P huruf ukuran 1.25em dari 20px</p>
    <p style="font-size:1.5em;">P huruf ukuran 1.5em dari 20px</p>
    <p style="font-size:1.75em;">P huruf ukuran 1.75em dari 20px</p>
    <p style="font-size:2em;">P huruf ukuran 2em dari 20px</p>
    <p style="font-size:2.25em;">P huruf ukuran 2.25em dari 20px</p>
    <p style="font-size:2.5em;">P huruf ukuran 2.5em dari 20px</p>
    <p style="font-size:2.75em;">P huruf ukuran 2.75em dari 20px</p>
    <p style="font-size:3em;">P huruf ukuran 3em dari 20px</p>
   </div>
</body>
</html>

Hasil Script :

Div huruf ukuran 20px

P huruf ukuran 0.25em dari 20px

P huruf ukuran 0.5em dari 20px

P huruf ukuran 0.75em dari 20px

P huruf ukuran 1em dari 20px

P huruf ukuran 1.25em dari 20px

P huruf ukuran 1.5em dari 20px

P huruf ukuran 1.75em dari 20px

P huruf ukuran 2em dari 20px

P huruf ukuran 2.25em dari 20px

P huruf ukuran 2.5em dari 20px

P huruf ukuran 2.75em dari 20px

P huruf ukuran 3em dari 20px

Menggunakan Satuan em Pada Dimensi Tinggi Dan Lebar Elemen HTML

Satuan em sebenarnya biasanya digunakan untuk font-size, padding, margin, text-indent dan lainnya yang berhubungan dengan tata kelola teks dan paragraf. Namun satuan em juga bisa diterapkan untuk menetapkan tinggi dan lebar elemen HTML. Namun yang perlu diperhatikan adalah bahwa ukurannya harus mengacu pada ukuran font size yang aktif.

Contoh dibawah ini, ukuran font-size tidak ditetapkan dan secara default akan berukuran 16px.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
   <title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
   <p style="height:2em;width:12em;border:solid 0.2em #f68989;">2em(16px) x 12em(16px)</p>
   <p style="height:2em;width:13em;border:solid 0.2em #f68989;">2em(16px) x 12em(16px)</p>
   <p style="height:2em;width:14em;border:solid 0.2em #f68989;">2em(16px) x 12em(16px)</p>
   <p style="height:2em;width:15em;border:solid 0.2em #f68989;">2em(16px) x 12em(16px)</p>
   <p style="height:2em;width:16em;border:solid 0.2em #f68989;">2em(16px) x 12em(16px)</p>
   <p style="height:2em;width:17em;border:solid 0.2em #f68989;">2em(16px) x 12em(16px)</p>
   <p style="height:2em;width:18em;border:solid 0.2em #f68989;">2em(16px) x 12em(16px)</p>
   <p style="height:2em;width:19em;border:solid 0.2em #f68989;">2em(16px) x 12em(16px)</p>
   <p style="height:2em;width:20em;border:solid 0.2em #f68989;">2em(16px) x 12em(16px)</p>
   <p style="height:2em;width:21em;border:solid 0.2em #f68989;">2em(16px) x 12em(16px)</p>
   <p style="height:2em;width:22em;border:solid 0.2em #f68989;">2em(16px) x 12em(16px)</p>
</div>
</body>
</html>

Hasil Script :

2em(16px) x 12em(16px)

2em(16px) x 12em(16px)

2em(16px) x 12em(16px)

2em(16px) x 12em(16px)

2em(16px) x 12em(16px)

2em(16px) x 12em(16px)

2em(16px) x 12em(16px)

2em(16px) x 12em(16px)

2em(16px) x 12em(16px)

2em(16px) x 12em(16px)

2em(16px) x 12em(16px)

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tutorial CSS

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami