SO-71588607

by David Thomas

HTML

<section id=box>
  <article>XXX</article>
</section>

CSS

/* defining custom properties, since you were
   using them already: */

:root {
  --text: 1em;
  --text-big: 1.5em;
  --spacing: 1em;
}


/* simple reset to normalise all elements to the same
   means of width/height calculation, font, margin and
   pading: */

*,
::before,
::after {
  box-sizing: border-box;
  font: normal 400 var(--text) / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: lightgray;
}

#box {
  /* unchanged: */
  width: 330px;
  height: 212px;
  background-color: orange;
  /* Added a 2px solid white border to replicate the
     aesthetics from your question's 'expected output': */
  border: 2px solid #fff;
  /* used a custom CSS property to implement the
     border-radius: */
  border-radius: calc(var(--spacing));
  /* Using logical properties to set the block-axis
     margin (top and bottom, perpendicular to the
     inline-axis, the writing-direction axis): */
  margin-block: var(--spacing);
  /* Again using logical properties to set the
     inline-axis margin, which is - effectively,
     but simplistically, the axis of writing-direction: */
  margin-inline: var(--spacing);
  /* logical properties again, for padding; though note
     that I'm using the same --spacing custom property, along
     with the CSS calc() function to reduce the size of the
     padding to half that of the --spacing property: */
  padding-block: calc(var(--spacing)/2);
  padding-inline: calc(var(--spacing)/2);
}

#box article {
  font-size: var(--text-big);
}