Css 指南针垂直节奏-HR标记打断垂直网格

我试着理解垂直节奏，读了一整天的书，尝试了几件事，但我的布局一直在中断，因为我没有正确地应用指南针，正如你在屏幕截图中看到的：

!

黄色背景的线条是我的hr标签。 橙色背景的是文章。 这是我的密码：

HTML:

为了简单起见，我对我的人力资源风格进行了评论

下面是另一个更明显的差距示例：

!

我不知道我做错了什么。请帮助我了解这个属性

链接：

---

你这里有几个问题

1浏览器应用您需要覆盖或重置的默认上/下页边距。完全重置如下所示：

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

2重置到位后，尾随边框混合将起作用。我将您的黄色保留在原位，以便您可以看到它添加的填充以及边框：

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

你也可以在那里添加你的领导和拖车。这将有助于创建一条适合节奏的线条，并在其周围留出空间，但我不认为这是你想要做的

3通过将顶部和底部边框设置为不同的颜色，看起来您需要双色调边框。这可以工作，但您不想使用尾随边框。事实上，没有垂直节奏的混音可以帮助你做到这一点——你必须用手来做。通过添加两个1px边框，您知道您正在打破2px的节奏。所以只要把那些px拿回来，你就可以走了：

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，您可以向另一侧添加引线或拖车，但不能同时添加两者。你必须从文章的页边空白处获得额外的空间。

这里有几个问题

1浏览器应用您需要覆盖或重置的默认上/下页边距。完全重置如下所示：

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

2重置到位后，尾随边框混合将起作用。我将您的黄色保留在原位，以便您可以看到它添加的填充以及边框：

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

你也可以在那里添加你的领导和拖车。这将有助于创建一条适合节奏的线条，并在其周围留出空间，但我不认为这是你想要做的

3通过将顶部和底部边框设置为不同的颜色，看起来您需要双色调边框。这可以工作，但您不想使用尾随边框。事实上，没有垂直节奏的混音可以帮助你做到这一点——你必须用手来做。通过添加两个1px边框，您知道您正在打破2px的节奏。所以只要把那些px拿回来，你就可以走了：

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，您可以向另一侧添加引线或拖车，但不能同时添加两者。你必须从文章的空白处获得额外的空间。

我也遇到过类似的问题

在我的例子中，我的基本字体大小是12px，基线是18px

正如Eric所说，通过添加两个1px边框，您知道您正在打破2px的节奏

这是前导边框和尾随边框混合可以帮助您的地方

前导边框$width:1px，$lines:1，$font size:$base font size， $border style:$默认节奏边框样式

尾随边框$width:1px，$lines:1，$font size:$base font size， $border style:$默认节奏边框样式

不幸的是，默认情况下，这些混音器会将边框与填充物组合在一起，但没有我的hr标签所需的边距，上下边框各为1px

我所做的是覆盖默认的mixin以添加margin属性，但不确定这样做是否好：

@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 {
    @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;
}

我的垂直节奏不再中断

---

试试看，让我知道它是否有效。

我也有类似的问题

在我的例子中，我的基本字体大小是12px，基线是18px

正如Eric所说，通过添加两个1px边框，您知道您正在打破2px的节奏

这是前导边框和尾随边框混合可以帮助您的地方

前导边框$width:1px，$lines:1，$font size:$base font size， $border style:$默认节奏边框样式

尾随边框$width:1px，$lines:1，$font size:$base font size， $border style:$默认节奏边框样式

不幸的是，默认情况下，这些混音器会将边框与填充物组合在一起，但没有我的hr标签所需的边距，上下边框各为1px

我所做的是覆盖默认的mixin以添加margin属性，但不确定这样做是否好：

@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 {
    @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;
}

我的垂直节奏不再中断

---

试一试，让我知道它是否有效。

谢谢Eric，我会将此标记为正确答案。虽然我的Susy项目的背景网格

---

仍然关闭-这就是我所说的中断。线仍然没有对齐。但是，由于垂直空间正好在99%的元素上对齐，我刚刚关闭了垂直背景网格的调试显示，忽略了它这不是一个理想的方法，但由于它基本上是有效的，我认为没有必要集中精力使假想的记事本上的线条对齐。尽管如此，我还是会在下一个项目中尽力让它100%正常工作。我发现我的背景垂直节奏经常是错误的，因为我忘记了这一行：$grid background baseline height:$base line height；。这显然应该是默认值，但由于某些原因，它不是。谢谢Eric，我会将此标记为正确答案。虽然我的Susy项目的背景网格仍然关闭-这就是我所说的中断。线仍然没有对齐。但是，由于垂直空间正好在99%的元素上对齐，我刚刚关闭了垂直背景网格的调试显示，忽略了它这不是一个理想的方法，但由于它基本上是有效的，我认为没有必要集中精力使假想的记事本上的线条对齐。尽管如此，我还是会在下一个项目中尽力让它100%正常工作。我发现我的背景垂直节奏经常是错误的，因为我忘记了这一行：$grid background baseline height:$base line height；。这显然应该是默认的，但出于某种原因，它不是。嗨，威廉，这听起来像是一个很好的解决办法，不管它是一个小黑客。我肯定会在下一个项目中尝试，并会让您随时了解-PS：这可能需要一段时间，因为我现在仍然忙于当前的项目。嗨，William，这听起来是一个很好的解决方法，不管它是一个小黑客。我肯定会在下一个项目中试用，并会随时向您通报-PS：这可能需要一段时间，因为我仍然忙于当前项目。