Using the pre and code HTML tags

  • # March 1, 2013 at 12:21 am

    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.

    # March 1, 2013 at 4:01 am

    This reply has been reported for inappropriate content.

    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><code><div>A Bunch of Words</div></code></pre>, and have whitespace (spaces, tabs, linebreaks) only where you actually want it in the output (since pre element preservers all whitespace).

    # March 1, 2013 at 2:53 pm

    This reply has been reported for inappropriate content.

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

    # March 1, 2013 at 5:19 pm

    This reply has been reported for inappropriate content.

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed