css - コンパス垂直リズム-HRタグは垂直グリッドを壊します

Question

私は垂直リズムを理解し、一日中読んで、いくつかのことを試しましたが、スクリーンショットでわかるように、コンパスパディングトレーラーを正しく適用できなかったため、レイアウトが壊れ続けています：

背景が黄色の線が私のhrタグです。
背景がオレンジ色のものは記事です。

これが私のコードです：

HTML：

<article>…&lt;/article>
<hr/>
<article>…&lt;/article>

CSS：

hr {
  background: rgba(yellow, 0.3);
  @include trailing-border;
  //border: 0;
  //height: 0;
  //border-top: 1px solid rgba(0, 0, 0, 0.1);
  //border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

わかりやすくするために、HRのスタイルをコメントしました。

ギャップがより目立つ別の例を次に示します。

！スクリーンショット2

hr {
  background: rgba(yellow, 0.3);
  @include trailer(1.5);
  @include trailing-border;
  @include leader(1.5);
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

ここで何が間違っているのかわかりません。このプロパティを理解するために私を助けてください。

リンク：

score 4 · Accepted Answer

ここにはいくつかの問題があります。

1）ブラウザは、オーバーライドまたはリセットする必要があるデフォルトの上/下マージンを適用します。完全な<hr/>リセットは次のようになります。

hr {
  border: 0;
  height: 0;
  margin: 0;
}

2）リセットが適切に行われると、trailing-borderミックスインが機能します（黄色を残したので、追加されたパディングと境界線を確認できます）。

hr {
  @include trailing-border; // adds padding-bottom and border-bottom properties
  background: rgba(yellow, .3); // shows in the padding
}

leaderそこに追加することもできますtrailer。それはリズムに合った、その周りにスペースがある単一のラインを作成するために機能しますが、これはあなたがやろうとしていることではないと思います。

3）上下の境界線を異なる色に設定して、ツートンカラーの境界線が必要なようです。それはうまくいくかもしれませんが、あなたは使いたくありませんtrailing-border。実際、これを支援する垂直リズムからのミックスインはありません-手作業で行う必要があります。1pxの境界線を2つ追加すると、リズムが2pxずれていることがわかります。したがって、これらのピクセルを元に戻すだけで、準備は完了です。

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin: -2px 0 0 0;
}

上部または下部のいずれかからこれらの2pxを差し引くことができ、反対側にリーダーまたはトレーラーのいずれかを追加できます（両方ではありません）。代わりに、記事の余白から余分なスペースを確保する必要があります。

score 0 · Accepted Answer

私も同様の問題を抱えていました。

私の場合、ベースフォントサイズは12px、ベースラインは18pxです。

エリックが言ったように、「2つの1pxの境界線を追加することで、リズムが2pxずれていることがわかります」。

これは、leading-borderとtrailing-borderミックスインがあなたを助けることができるところです。

leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style)
trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style)

残念ながら、デフォルトでは、これらのミックスインは境界線をパディングと結合しますが、マージンは結合しません（それぞれ1pxの上部と下部の境界線を持つhrタグに必要なもの）。

私がしたことは、デフォルトのミックスインをオーバーライドしてマージンプロパティを追加することでした（これを行うのが良いかどうかはわかりません）：

@function rhythm($lines: 1, $font-size: $base-font-size, $offset: 0) {
    @if not $relative-font-sizing and $font-size != $base-font-size {
        @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function";
    }

    $rhythm: $font-unit * ($lines * $base-line-height - $offset) / $font-size;

    // Round the pixels down to nearest integer.
    @if unit($rhythm) == px {
        $rhythm: floor($rhythm);
    }

    @return $rhythm;
}

/*override original apply-side-rhythm-border mixin to include property variable - now you can use padding or margin for adding whitespace*/
@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style, $property: padding) {

    @if not $relative-font-sizing and $font-size != $base-font-size {
        @warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border"; }

    border-#{$side}: {
        style: $border-style;
        width: $font-unit * $width / $font-size; };

    #{$property}-#{$side}: rhythm($lines, $font-size, $offset: $width);
}

/*override original leading-border mixin to include property variable - now you can use padding or margin for adding whitespace*/
@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style, $property: padding) {
    @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style, $property);
}

/*override original trailing-border mixin to include property variable - now you can use padding or margin for adding whitespace*/
@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style, $property: padding) {
    @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style, $property);
}

今私のhrタグ：

hr {
    @include leading-border($property:margin);
    @include trailing-border($property:margin);
    border-bottom-color: #353535;
    border-top-color: #0d0d0d;
}

コンパイルされます：

hr {
    border-bottom: 0.083em solid #353535;
    border-top: 0.083em solid #0D0D0D;
    margin-bottom: 1.417em;
    margin-top: 1.417em;
}

そして、私の垂直リズムはもう壊れていません。

試してみて、うまくいくかどうか教えてください。

css - コンパス垂直リズム-HRタグは垂直グリッドを壊します

リンク：

2 に答える 2

Related

Reference