How do I indent an html page with "TAB" (or four space characters)?

Issue

I want to embed my C code in the HTML page, but the HTML format will only keep the text to the left. As follows:

HTML

<style type="text/css">
    .codebox {
            color: rgb(230, 230, 210);

            width: 700px;
            height: 100%;
            padding-top: 2px;
            padding-left: 5px;
            padding-right: 5px;
            padding-bottom: 2px;

            background-color: rgb(170, 150, 190, 0.37);
            border: 2px solid rgb(170, 150, 190);
            border-radius: 5px;
        }
</style>

<div class="codebox">
    int main(int argc, char **argv)
    {
        size_t x;
        for(x = 0; x < 256; ++x) {
            ...
        }
        return 0;
    }
</div>

But the actual effect is as follows:

int main(int argc, char **argv)
{
size_t x;
for(x = 0; x < 256; ++x) {
...
}
return 0;
}

I know can use the "pre" tag, but this will make all the formats be rendered.

I am not familiar with the knowledge of the web front end. I hope you can help me.

Solution

You need to use pre (= pre-formated code)
2 ways =>
a) use the tag <pre>
b) use the css white-space : pre-wrap;

but the pre directive is not enough because you have a < charater in your text.
another 2 ways =>
a) change all yours < characters into < html entities
b) use a <code> tag.

sample:

.codebox {

  white-space      : pre-wrap;

  color            : darkblue;
  width            : 400px;
/*  height           : 100%; */
  padding-top      : 2px;
  padding-left     : 5px;
  padding-right    : 5px;
  padding-bottom   : 2px;
  background-color : rgb(170, 150, 190, 0.37);
  border           : 2px solid rgb(170, 150, 190);
  border-radius    : 5px;
}

<div class="codebox"><code>
    int main(int argc, char **argv)
    {
      size_t x;
      for(x = 0; x < 256; ++x) {
          ...
      }
      return 0;
    }
</code></div>

All in one...

code {
  display           : block;
  white-space       : pre-wrap;
  background        : #f5f5f5;
  tab-width         : 4;      /* may help */
  overflow-x        : auto;   /* may help */
  color             : darkblue;
  width             : 400px;
  padding           : 0 1em;
  background-color  : rgb(170, 150, 190, 0.37);
  border            : 2px solid darkgrey;
  border-radius     : 5px;
  }
code::after {
  content : '\A'
  }

<code>
int main(int argc, char **argv)
  {
  size_t x;
  for(x = 0; x < 256; ++x) 
    {
    ...
    }
  return 0;
  }
</code>

Answered By - Mister Jojo