CSS inset-block Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.container {
  position: relative;
  width: 620px;
  height: 160px;
  border: 1px solid #ddd;
  margin: 20px;
  padding: 0;
  background: #f9f9f9;
}

.box {
  position: absolute;
  inset-block: 20px 40px; /* block-start | block-end */
  inset-inline: 20px;     /* inline start & end */
  background: linear-gradient(135deg, #dff7e1, #b7e4a5);
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-radius: 6px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.vertical-container {
  position: relative;
  width: 220px;
  height: 260px;
  border: 1px dashed #ccc;
  margin: 20px;
  writing-mode: vertical-rl;
  background: #fff;
}

.vertical-container .box {
  inset-inline: 24px;
  inset-block: 18px 60px;
  background: linear-gradient(135deg, #e6f0ff, #c8ddff);
}
</style></head><body><div class="container">
  <div class="box">Inset-block: 20px 40px</div>
</div>

<div class="vertical-container">
  <div class="box">Vertical writing-mode<br>Inset-block: 18px 60px</div>
</div></body></html>