Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> .fallback-container { background-color: #f8f9fa; border: 4px solid #dc3545; font-family: sans-serif; max-width: 500px; /* "safe-area-inset-LEFT" does not exist (it should be "safe-area-inset-left"), so the browser will use the 80px fallback value for the left padding. */ padding-left: env(safe-area-inset-LEFT, 80px); padding-right: env(safe-area-inset-right, 80px); } .fallback-content { font-size: 1.2em; } </style> <div class="fallback-container"> <div class="fallback-content"> Because environment variables are case-sensitive, "safe-area-inset-LEFT" does not exist (it should be "safe-area-inset-left"). Therefore, the browser is forced to use the 80px fallback value for the left padding. The right padding, however, will be set to the value of the device's safe area inset. </div> </div>