Grow your CSS skills. Land your dream job.

Random padding on top and bottom of the code elements

  • # December 11, 2012 at 7:45 pm

    Hey everyone! I’m experiencing a problem with my [blog](http://mattkosloski.tumblr.com/post/36558501423/css-slider “blog”). For the <code> inside of the <pre> boxes, there seems to be random padding on the top and on the bottom of it. Below is a url to a screenshot that climaxes my problem. Notice there’s no padding on the right side, a little padding on the left, and a lot of padding on the top and bottom.

    http://d.pr/i/bm5i

    # December 11, 2012 at 8:03 pm

    now that is weird. the reset doesn’t add anything to it.

    # December 11, 2012 at 8:11 pm

    hmmm. u have a line-height that might be the issue:


    code {
    font-family: 'Inconsolata';
    line-height: 20px;
    }
    # December 11, 2012 at 8:13 pm

    @twincy , There’s still padding on the sides. :( Thank you for you help though! Very appreciated.

    # December 11, 2012 at 8:42 pm

    It’s the spaces, tabs, and line returns in your code

    # December 12, 2012 at 3:32 am

    wolfcry is right, it’s a line return causing that issue. So instead of writing your HTML like this:

    Whatever

    You should write it like this:

    Whatever

    # December 12, 2012 at 12:45 pm

    Are you wrapping it in “code” tag? If so that’s prob why. Just remove it and only use pre. Like this http://www.visibilityinherit.com/code/display-code.php

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

You must be logged in to reply to this topic.

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