Adjusting text position in CSS-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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: