自动<pre> padding-left</pre>

时间:2013-07-31 15:05:34

标签: css sass

今天在设置<pre>标签时遇到了一些问题。

<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    <pre>
        .wrapper {
            width: 100%;
            color: $orange;
        }
    </pre> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

pre {
    @include mono;
    color: $light-grey;
    background-color: $orange;
    padding-top: 1em;
    margin: 15px 0 15px 0;
    width: 585px;
    @include box-sizing(border-box);
}

SCSS变量和mixins都是自解释的。这是输出:

橙色框是<pre>,米色框是<div class="content">,外部橙色框是<body>

我不知道为什么会出现这种行为。根本没有填充填充。

感谢您的帮助!

1 个答案:

答案 0 :(得分:2)

我认为您在HTML源文件中看到空白区域...您需要在<pre>标记中回显代码段之前将其删除(以智能方式)。

小提琴演示:http://jsfiddle.net/audetwebdesign/teYjW/

相关问题