HTML Online Editor
Run ❯
<!DOCTYPE html> <html> <head> <style> :root{ font-size:20px } body { font-family:Arial; } .box{ border:3px solid green;padding:5px;text-align:center; font-size:1rem; /* box ini menggunakan 1rem=20px, karena root dirubah menjadi 20px */ margin-bottom:.5rem; /* jarak ke bawah 10px, karena 0.5x20 = 10 */ } .box2{ border:3px solid blue;margin-bottom:.5rem;padding:5px;text-align:center; font-size:1.25rem; /* 1.25x20 = 25, artinya besar huruf 25px*/ } </style> </head> <body> <div class="box"> <p>Box ini dengan font-size 1rem = 20px.</p> </div> <div class="box2"> <p>Box ini dengan font-size 1.25rem = 25px.</p> </div> <div style="font-size:20px">Teks ini menggunakan ukuran fix 20px. Teks ini tidak berubah karena PX adalah ukuran fix</div> </body> </html>