Html 透明<；人力资源>；对于响应性垂直间距：它真的那么不灵光吗？

我已经开始在前端设计中使用一种处理垂直间距的技术，它对间距元素使用透明的

。我知道这让大多数网络社区对我恨之入骨，但我仍然认为这是处理特殊情况的好方法。以下是好处：

是一个自动关闭标记，因此它在标记上是一种类型

它的语义目的（根据）是用一节来表示主题的中断或主题的转移。MDN还精确地定义了语义术语，而不是表示术语，这意味着只占用空间的不可见的

并不反对元素的语义

跨浏览器保持一致的样式是很容易的

我们可以将反应性行为融入其中

我非常清楚标记和样式之间需要分离。然而，在响应式设计中，元素之间的垂直间距有时很繁琐，在我看来，通常比语义标记的价格更高

一种常见的方法是使用手动样式处理特殊情况：当基于组件的类，例如

。我的特殊循环元素
不够精确时（假设这个元素离它下面的元素太近），我们可以添加一个id
#需要间距的特殊元素
，并手动设置样式，这变得很难维持：

/* Ensure that the special element is not too close to the footer in mobile */

#special-element-that-requires-spacing {
  margin-bottom: 1rem;
}

@media screen and (min-width: 640px) {
  #special-element-that-requires-spacing {
    margin-bottom: 0;
  }
}

这就是为什么CSS实用工具工具包（如和）在最近几年变得更加流行的原因。它允许使用内联类调整垂直间距，并增加了直接响应处理的好处。现在，我们可以这样编写HTML（以超光速子为例）：

因此，我们在这里所做的是实用和快速的，但无法维护。它也不能帮助我们处理一个非常常见的用例：“我应该把空间放在哪里？我应该给这个添加一个
padding bottom
吗？给这个添加一个
margin top
吗？哦，我需要删除mobile上的padding，但是这里的margin不小”，等等

输入
空间。现在，我们可以在想要分离的两个元素之间放置一个
，并且元素之间具有一致的、可读的、可维护的和语义上的间隔，这些间隔既不会干扰标记也不会干扰样式表

hr.space-1 {
  background: transparent;
  color: transparent;
  margin: 0;
  height: 1rem;
}

@media screen and (min-width: 640px) {
  hr.space-1 {
    height: 1.5rem;
  }
}

@media screen and (min-width: 1200px) {
  hr.space-1 {
    height: 2rem;
  }
}

这真的是那么严重的犯罪吗？这种方法有哪些缺点？
是犯罪吗？不，它是一个有效的HTML/CSS

但是

这在语义上是不正确的
hr
意味着（对于大多数web开发人员而言）应该出现一些可视元素。如果您仅将其用作垫片，则使用
div
。默认情况下，它是透明的，与
hr
相对，并且更容易被其他人维护

我甚至更喜欢在类中使用
br
，而不是
hr
来分隔元素

不要低估一个事实，即大多数开发人员都不同意您的观点。为了强调这一点，想象一下使用一种设计模式来解决一个与以往不同的问题。当你试图理解你试图解决的问题时，它会让其他人感到困惑
 这是犯罪吗？不，它是一个有效的HTML/CSS

但是

这在语义上是不正确的
hr
意味着（对于大多数web开发人员而言）应该出现一些可视元素。如果您仅将其用作垫片，则使用
div
。默认情况下，它是透明的，与
hr
相对，并且更容易被其他人维护

我甚至更喜欢在类中使用
br
，而不是
hr
来分隔元素

不要低估一个事实，即大多数开发人员都不同意您的观点。为了强调这一点，想象一下使用一种设计模式来解决一个与以往不同的问题。当你试图理解你试图解决的问题时，它会让其他人感到困惑
 这根本不是犯罪。我会用一个div和一个类来实现它，但你是对的，用
更“符合语义”。有一个标签叫做，正是为了这个目的；我对
的唯一问题是，它只能增加垂直空间，对于水平的情况，它并没有真正的用处。但无论如何，这是一个罕见的案例

HTML5对于完全和绝对的语义标记仍然不是完美的；有带破折号的标记可以解决此问题，但：


…他们没有得到真正的支持。还没有。无论标签多么漂亮，你现在都做不到

因此，不要害怕在代码中使用一些不那么语义化的标记；随着HTML5支持的增加，它将迅速发展。不要听标准的，否则就死定了。他们暂时处于学习状态。
这根本不是犯罪。我会用一个div和一个类来实现它，但你是对的，用
更“符合语义”。有一个标签叫做，正是为了这个目的；我对
的唯一问题是，它只能增加垂直空间，对于水平的情况，它并没有真正的用处。但无论如何，这是一个罕见的案例

HTML5对于完全和绝对的语义标记仍然不是完美的；有带破折号的标记可以解决此问题，但：


…他们没有得到真正的支持。还没有。无论标签多么漂亮，你现在都做不到

因此，不要害怕在代码中使用一些不那么语义化的标记；随着HTML5支持的增加，它将迅速发展。不要听标准的，否则就死定了。他们处于暂时的学习状态。
以语义方式使用
hr
意味着根据定义使用它。HTML 5.1：

hr
元素表示段落级别的主题中断，例如，故事中的场景变化，或参考书某一部分中的另一主题过渡

您可以设置
h的样式
<div class="ph2 pv3 pv2-m pv1-l mb2 mb2-ns"></div>

hr.space-1 {
  background: transparent;
  color: transparent;
  margin: 0;
  height: 1rem;
}

@media screen and (min-width: 640px) {
  hr.space-1 {
    height: 1.5rem;
  }
}

@media screen and (min-width: 1200px) {
  hr.space-1 {
    height: 2rem;
  }
}