除了在一条线的边缘之外,如何增加单词周围的边距

Question

我正在使用<code>额外的CSS.我想增加左/右边距

code {
  margin-left: 10px;
  margin-right: 10px;
}

This word is a <code>reserved</code> word.

这通常很好,但是如果这个单词在一行的开头,那么左边有一个我不想要的尴尬的额外边距.例:

code {
  margin-left: 10px;
  margin-right: 10px;
}

This word is a <br><code>reserved</code> word.

要清楚的<br>是,仅仅是针对上面的例子...我不知道什么时候<code>它在行的开头,它取决于它是如何折叠的(对于给定的窗口宽度).

CSS word-spacing似乎可能是这里的修复,但它似乎只是字间距,所以它不起作用.

有没有办法用CSS完成这个？

Answer 1

我只能找到2 3 种方法来解决这个问题，除非你想要一个脚本运行文本和计数行，那就是通过包装文本的其余部分，

span {
  margin-right: 10px;
}
code {
  margin-right: 10px;
}

<span>This word is a </span><code>reserved</code><span> word.
This word is a <br></span><code>reserved</code><span> word.
This word is a </span><code>reserved</code><span> word.</span>

或保留字前面的每个字。

span {
  margin-right: 10px;
}
code {
  margin-right: 10px;
}

This word is <span> a </span><code>reserved</code> word.
This word is <span> a </span><br><code>reserved</code> word.
This word is <span> a </span><code>reserved</code> word.

如果前面单词的元素经常不同（如span, b, i），这里有一个 CSS 规则变体来解决这个问题。

code {
  margin-right: 10px;
}
*:not(br) + code {
  margin-left: 10px;
}

This word is <span> a </span><code>reserved</code> word.
This word is <i> a </i><br><code>reserved</code> word.
This word is <b> a </b><code>reserved</code> word.

这是另一种方法，尽管它是一个小缺陷，它不会正确地换行，因为保留字在标记中需要没有空格到前面最接近的单词。不过，它确实还有另一个好处，即最小的标记。

code {
  margin: 0 10px;
}
code:before,
code:after {
  font-size: 0px;
  content: ' ';
}

This word is a<code>reserved</code> word.
This word is a<code>reserved</code> word.
This word is a<code>reserved</code> word.
This word is a<code>reserved</code> word.
This word is a<code>reserved</code> word.
This word is a<code>reserved</code> word.