Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <style> html { font-size: 16px; } body { font-family: Arial; padding: 20px; } .px-box { width: 200px; background: #ede9fe; padding: 16px; margin: 8px 0; } .pct-box { width: 50%; background: #d1fae5; padding: 16px; margin: 8px 0; } .rem-box { font-size: 1.5rem; background: #fef3c7; padding: 16px; margin: 8px 0; } .vw-box { width: 50vw; background: #fce7f3; padding: 16px; margin: 8px 0; } </style> </head> <body> <div class="px-box">200px wide</div> <div class="pct-box">50% of parent</div> <div class="rem-box">1.5rem font size</div> <div class="vw-box">50vw wide</div> </body> </html>
Result
Open