Grow your CSS skills. Land your dream job.

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

    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 `

    <div>A Bunch of Words</div>

    `, 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

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

    # March 1, 2013 at 5:19 pm

    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.

*May or may not contain any actual "CSS" or "Tricks".