Forums

MattKnowsTech

Hey everyone! I'm experiencing a problem with my 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

twincy

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

twincy

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

code {
    font-family: 'Inconsolata';
    line-height: 20px;
}

MattKnowsTech

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

wolfcry911

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

_dte

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

  <code>
      <div>
          <div>Whatever</div>
      </div>
  </code>

You should write it like this:

  <code><div>
      <div>Whatever</div>
  </div></code>

Eric

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

treehouse : what would you like to learn today?

Forums

[Solved] Random padding on top and bottom of the code elements