CODEWITHSUNDEEP
htmlcssindentation
Kevin Li
Kevin Li

Reputation: 255

How do I indent <code> elements? Example in details

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.

Upvotes: 0

Views: 994

Answers (3)

Blender
Blender

Reputation: 298492

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!

Upvotes: 1

Yahel
Yahel

Reputation: 37305

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.

Upvotes: 4

Dominik Seibold
Dominik Seibold

Reputation: 2469

Did you try something like this?

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

Upvotes: 2

Related Questions