встроенные gists имеют дополнительные разрывы строк

Question

Я встроил github gist в свой блог, и полученный код имеет некоторые дополнительные разрывы строк в верхней и нижней частях, которые я хотел бы удалить. Мой блог использует CSS от проекта начальной загрузки, а также ухищрения шрифта:

body { 
    font: 100%/1.5 sans-serif; 
} 

Я created this fiddle как дем вопроса.

Каков наилучший способ избавиться от перерывов? Должен ли я стилизовать шрифт встроенного шрифта? Благодаря!

Answer 1

Я понял, это линия-высота. Вам нужно будет убедиться, что строка строки для номеров строк в списках кодов соответствует высоте строки для самого кода.

Answer 2

Я не уверен, что это то, что вы ищете.

Пожалуйста, посмотрите на эту jsFiddle

/* Your Css */ 
    body { 
      font: 100%/1.35 sans-serif; 
    } 

ли я получить то, что вы имеете в виду? Дополнительные линии сверху и снизу?

Answer 3

Это происходит из-за разных line-height в номерах строк и строках кода. И это потому, что вы используете относительный line-height (это зависит от размера шрифта) и разные размеры шрифта для номеров строк (ваш размер шрифта) и код строки (bootstrap переопределяет font-size и line-height для pre и code элементов). Чтобы исправить это, вы можете сбросить бутстраповских стили для GitHub гов:

UPD:

.gist pre, 
.gist code { 
    font: inherit; 
    white-space: pre; 
} 

доказательство: http://jsfiddle.net/W25px/8/

Answer 4

Помимо ответа Sody, где вы должны сбросить шрифт, вы должны также измените поведение свойства white-space для выравнивания кодовых и числовых строк.

С:

.gist pre, 
.gist code { 
    font: inherit; 
    white-space: pre; 
} 

Ваша сущность должна отображаться неидеально: JsFiddle

Answer 5

Добавьте этот тип перед селектором тела * {line-height: normal;}

Смотреть это Fiddle

вы можете также использовать line-height: 100% чем нормальный (a littl разница е вы заметите)

И как уже говорилось, как и в других ответов, вы можете также использовать высоту строки там внутри

.gist pre, 
.gist code { 
    line-height: 100%; 
} 

Если это тоже не решает вашу проблему, поля или значение обивка может иметь были установлены. Измените так, что margin: 0; padding: 0;

Answer 6

Похоже, что встроенный скрипт github gist неинтересно влияет на высоту строки 1.5.

<div class="gist"> 
    <script src="https://gist.github.com/yosemitebandit/5295069.js?file=train.py"> 
    </script> 
</div> 

.gist { 
    font:100%/1 sans-serif; 
} 

представляется простым исправлением.