treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Using the pre and code HTML tags

  • I'm trying to recreate the code modules that Chris has on this site, but I can't seem to get the actual code to kiss the edge of the code module itself (i.e., kiss the edge of the pre tag). For reasons unknown to me, the content seems to be defaulting to the middle.

    Here is a link to an example of what I'm referring to: (http://codepen.io/anon/pen/ciuCj "Codepen")

    I'd appreciate any help.

  • You have 3 tabs before your text, each tabs will be 8 spaces width, making an indent of 24 spaces. Try to make it one line <pre rel="HTML"><code>&lt;div&gt;A Bunch of Words&lt;/div&gt;</code></pre>, and have whitespace (spaces, tabs, linebreaks) only where you actually want it in the output (since pre element preservers all whitespace).

  • Sometimes it's the simplest solutions that belie us! Thanks.

  • Yeah, no problem! Wish it could be different though. Can't have pretty indented html with pre elements.