Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> .env-max-container { background-color: #f8f9fa; border: 4px dashed #343a40; font-family: sans-serif; max-width: 500px; /* Using max() ensures that even if the env() variable evaluates to 0px (like on a desktop monitor), the padding will never be less than 20px. */ padding-top: max(20px, env(safe-area-inset-top)); padding-right: max(30px, env(safe-area-inset-right)); padding-bottom: max(80px, env(safe-area-inset-bottom)); padding-left: max(120px, env(safe-area-inset-left)); } .env-max-content { background-color: #28a745; color: #ffffff; padding: 30px; text-align: center; font-weight: bold; font-size: 1.2em; } </style> <div class="env-max-container"> <div class="env-max-content"> Protected by max() </div> </div>