Adjusting text position in CSS - html

Question

I'm new to writing HTML and CSS, and I'm having trouble adjusting the text position.
This is what I expected to see:
But here is what I actually got:
and here is my code:
#box {
width: 330px;
height: 212px;
margin-top: 1px;
margin-left: 22.5px;
background-color: orange;
}
#box topic {
font-size: var(--text-big);
font-family: myFirstFont;
margin-top: 20px;
margin-top: 20px;
}
<section id=box>
<topic>XXX</topic>
</section>

Answer 1

You can add this lines to your box class to archive this.
border-radius:10px;
padding: 10px 8px;
box-sizing: border-box;
#box {
width: 330px;
height: 212px;
margin-top: 1px;
margin-left: 22.5px;
background-color: orange;
border-radius:10px;
padding: 10px 8px;
box-sizing: border-box;
}
#box topic {
font-size: var(--text-big);
font-family: myFirstFont;
margin-top: 20px;
margin-top: 20px;
}
<section id="box">
<topic>XXX</topic>
</section>

Answer 2

Add border-radius and padding to your section box
border-radius: 10px; /* this will make rounded edges*/
padding: 20px; /* this will give spacing */
Learn about Padding : https://developer.mozilla.org/en-US/docs/Web/CSS/padding
#box {
width: 330px;
height: 212px;
margin-top: 1px;
margin-left: 22.5px;
background-color: red;
border-radius: 10px;
padding: 20px;
}
#box topic {
font-size: var(--text-big);
font-family: myFirstFont;
margin-top: 20px;
margin-top: 20px;
}
<section id=box>
<topic>XXX</topic>
</section>

Answer 3

Just add some padding to your element (#box), for example padding: 12px; (adjust the value as needed). This will create an "inner distance" between border and contents.
#box {
width: 330px;
height: 212px;
margin-top: 1px;
margin-left: 22.5px;
background-color: #fc0;
padding: 12px;
}
<section id=box>
<topic>XXX</topic>
</section>

Answer 4

One option is as follows, among many others; explanatory comments are in the code:
/* 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);
}
<section id=box>
<!-- Note that there is no <topic> element,
so I replaced that with an <article>
element instead: -->
<article>XXX</article>
</section>
JS Fiddle demo.
References:
calc() function.
CSS Logical Properties.
var() function.