1

<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 変数と mixin はすべて一目瞭然です。これは出力です：

オレンジの箱が<pre>、ベージュの箱が<div class="content">、外側のオレンジの箱が<body>です。

この動作が存在する理由がわかりません。パディングはまったく適用されません。

助けてくれてありがとう！

4

1 に答える 1

2

HTMLソースファイルに空白が表示されていると思います...<pre>タグでコードスニペットをエコーする前に、（スマートな方法で）空白を取り除く必要があります。

フィドルのデモ: http://jsfiddle.net/audetwebdesign/teYjW/

于 2013-07-31T15:16:14.510 に答える