如何缩进<code>elements? Example in details</code> <code>elements? Example in details</code>

Question

http://htmlpocketreference.110mb.com/taggroups.html

For the site above, how would I indent all the code. I don't want it aligned with the paragraph and headings. I want it to be one indent level in. You can check my source if you want and the css is embedded in the html already.

Also, any suggestions on how to improve it?

(Note: I'm not publishing the site, I'm just practicing on getting all the formatting right.

Answer 1

To indent each <code> block, you can use something like:

code{
     display: block;
     margin: 0 40px;
}

To indent only the first line of each <code> block,

code{
     text-indent: 40px;
}

40px is just a suggestion; you can adjust the indentation width to suit your visual needs.

Answer 2

Did you try something like this?

code {
position: relative;
left: 20px;
}

Answer 3

The previous two answers got the methods spot-on:

code
{
  display: block;
  margin-left: 40px;
  font-family: monospace; /* I would add this too, as it makes the code more readable. */
}

Also, as you are displaying code (I hope), try SHJS . Good luck!