Padding

Space inside an element.

html

<div class="pd-wrap" role="img" aria-label="A blush padding layer between an element's border and its content, sized independently on each side">
  <div class="pd-outer" style="padding:24px 24px 24px 24px;">
    <div class="pd-content">content</div>
  </div>
  <p class="pd-caption">padding: 24px 24px 24px 24px (top right bottom left)</p>
</div>
<style>
.pd-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }
.pd-outer { background: #F5C2E0; border-radius: 8px; box-sizing: border-box; }
.pd-content { background: #A8E6C1; border-radius: 6px; padding: 10px; font-weight: 700; text-align: center; }
.pd-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[300px]" role="img" aria-label="A blush padding layer between an element's border and its content, sized independently on each side">
  <div class="bg-[#F5C2E0] rounded-lg box-border" style="padding:24px 24px 24px 24px;">
    <div class="bg-[#A8E6C1] rounded-md p-2.5 font-bold text-center">content</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">padding: 24px 24px 24px 24px (top right bottom left)</p>
</div>

react

export function Padding({
  top = 24,
  right = 24,
  bottom = 24,
  left = 24,
}) {
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 300 }}
      role="img" aria-label="A blush padding layer between an element's border and its content, sized independently on each side">
      <div style={{ background: "#F5C2E0", borderRadius: 8, boxSizing: "border-box", padding: `${top}px ${right}px ${bottom}px ${left}px` }}>
        <div style={{ background: "#A8E6C1", borderRadius: 6, padding: 10, fontWeight: 700, textAlign: "center" }}>content</div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>padding: {top}px {right}px {bottom}px {left}px (top right bottom left)</p>
    </div>
  );
}