1

So I'm setting up code highlighting on my blog using Jekyll and Pygments, and the first line of every snippet is offset by some infinitesimal amount. I'm trying to use a right-border of the lineno class to create a gutter, which is making the offset very apparent, as seen below

offset

Here is the DOM when I inspect the relevant area,

css tree

and here is the source:

view source

Here is the relevant CSS Source:

.highlight code {
    background:#3A434A;
    font-family: 'Source Code Pro', Monaco, monospace;
    }
.highlight pre {
    background:#3A434A;
pre .lineno { 
    color: #eff1f5; 
    display:inline-block; 
    padding: 4px 10px 4px 0px; 
    border-right:1px solid #8fa1b3
}

This is infuriating me, hahah; I'm sure I'm missing something obvious. I get consistent behavior across all browsers. Also, Here's a link if you'd like to view it yourself.

oflannabhra
  • 661
  • 5
  • 18

1 Answers1

2

From Jekyll css

pre > code {
  border: 0;
  padding-right: 0;
  padding-left: 0; }

code padding-left needs to be 0.

David Jacquel
  • 51,670
  • 6
  • 121
  • 147
  • aweseom! thanks a bundle! Any idea why the padding was affecting the first line that way but not the others? – oflannabhra Sep 19 '14 at 12:49
  • Sorry I'm not a css guru, I just get this from the **F12** debug. But if it's not a bug, it's a feature ;-) – David Jacquel Sep 19 '14 at 13:21
  • For some reason, I'm guessing that the `` tag has no width or height, even though Dev Tools shows it as wrapping the child. The browser is actually applying this padding "in between" the `
    ` and the first child element of the ``
     – oflannabhra Sep 22 '14 at 19:57