在 CSS 中使用 pseudo-element 到 space 段落有什么问题吗？

Question

我对space段落（或段落和其他元素）所做的大部分时间是使用::before标签。例如

p + p::before {
  content: '';
  display: block;
  margin: 20px 0;
}

这样，我就可以非常具体地了解我的白色space。例如，我也可以这样做

h1 + p::before {
  content: '';
  display: block;
  margin: 10px 0;
}

这样我就知道每个元素之间的 space 是如何表现的。

这是好的做法吗？

在大多数地方我都读到应该专门使用边距和填充，但我发现我在使用它们时过于依赖 id 选择器。

同一个主题，如果我要使用它们，我应该使用边距还是填充？在一些地方我读到边距是首选，但在其他地方应该使用填充来排版。通过排版，我指的是文本的主要 body：标题、段落及其可能包含的所有内容。

当然，我想避免在我的 HTML 代码中使用 <div>，尽量保持语义化。

Answer 1

在 CSS 下串联使用边距和填充将使您可以更自由地决定元素或边框之间需要多少白色 space。使用填充来确定您想要在闭合边框内的元素之间有多少 space，例如 div 或 table 等。当您想要处理涉及的白色 space 时不限于边框或特定边界的元素，使用边距。 margin 和 padding 都允许你决定你想要在你选择的元素的右边、左边、顶部和底部有多少space。

Answer 2

Is this good practice?

不，不是真的。这是牺牲了有价值的伪元素，这些伪元素可用于生成的内容或其他巧妙的布局技巧 (every element can only have one ::before pseudo-element at a time)，以做一些可以通过元素本身的边距按常规完成的事情。

间距段落的典型做法是在每个段落上指定垂直边距，并允许边距折叠来完成其余部分：

p {
  margin: 20px 0;
}

... 因为这就是页边距折叠的设计目的：所以作者可以说，“段落之间应该有 20px 的 space”，而无需计算页边距 each 段应该在两端。换句话说，这就是 CSS 实现文字处理器中段落间距概念的方式。

如果您不希望出现这种情况，只需指定上边距或下边距，然后在需要不同的地方更改上边距或下边距的值。例如：

p {
  margin: 20px 0 0 0; /* Equivalent to margin: 0; margin-top: 20px; */
}

h1 + p {
  margin-top: 10px;
}

不需要为此使用伪元素。

On most places I have read that margins and padding should be used exclusively, but I found that I depend too much on id selectors when using them.

On the same topic, if I were to use them, should I use margin or paddings? On some places I have read that margins are prefered, yet on others that padding should be used for typography.

这太笼统了，无法简洁地回答，但我会说边距和填充可以在某些情况下一起使用，因为它们在布局中有不同的用途。

也就是说，每当您发现自己想知道是否应该使用一个或另一个时，请首先考虑它们的设计目的：边距创造 space 在元素之外（可以以各种方式与其他边距交互）；填充在 space 内部元素中创建，以为其子元素提供远离其内容边缘的喘息空间。同样，有很多情况不是那么简单，但不幸的是，它太广泛了，无法用一个答案涵盖。

我不清楚传闻中的“排版”指的是什么。

在 CSS 中使用 pseudo-element 到 space 段落有什么问题吗？

Any problems with using a pseudo-element to space paragraphs with CSS?

html

css

pseudo-element