safe-area-inset

by Gabriel

HTML

<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu feugiat augue. Phasellus urna metus, tincidunt porttitor accumsan sed, finibus ut felis. Proin commodo tincidunt est et egestas. Nullam a faucibus elit. In pellentesque in libero ac faucibus. Pellentesque auctor arcu eu eleifend convallis. Aliquam efficitur quis elit eu dignissim. Praesent id lobortis metus. Sed metus sapien, interdum nec scelerisque a, vestibulum vitae ipsum. Nullam vel elit non turpis rutrum euismod non ut enim. Phasellus in arcu ac nisl facilisis tempus. Ut tempus odio sed suscipit consectetur. Proin convallis arcu vel eros consectetur dapibus. Nullam lectus nisl, condimentum id finibus eu, ornare non orci.

Morbi et nunc nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur posuere tortor velit, non ultricies metus lobortis iaculis. Praesent tincidunt eget orci non mollis. Suspendisse accumsan pulvinar sapien vel condimentum. Phasellus pharetra sollicitudin porta. Nullam non felis quis odio fermentum mollis consequat vitae turpis. Maecenas sagittis justo in viverra pharetra. In commodo diam mauris, at porttitor dui porttitor ut. Suspendisse suscipit risus ipsum, sit amet tristique ex interdum id. Aliquam ante dolor, condimentum in dolor et, volutpat condimentum metus. Cras pellentesque turpis eget quam blandit, vel commodo purus tincidunt.

Donec mollis nisi quam, sit amet auctor massa tempus sit amet. Donec ipsum nibh, porttitor eu lacus vitae, congue ornare purus. Aliquam bibendum scelerisque mattis. Integer vitae suscipit ligula. Duis hendrerit sem sed tristique cursus. In hac habitasse platea dictumst. Mauris eu cursus nibh. Integer lorem leo, ultricies id rutrum vel, pharetra id nunc. Etiam accumsan fermentum lectus non suscipit. Praesent id diam tristique, bibendum erat sed, rutrum ipsum.

Quisque fermentum ex et erat aliquet condimentum. Proin libero metus, dictum eu metus quis, finibus pulvinar...

CSS

.container {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}