Question

我正在使用code { margin-left: 10px; margin-right: 10px; }加上额外的CSS。我想增加左/右边距

＆＃13;

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

＆＃13;

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

＆＃13;

通常效果很好，但是如果这个单词位于一行的开头，那么左边有一个我不想要的尴尬的额外边距。例：

＆＃13;

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

＆＃13;

<br>

＆＃13;

要明确的是，<code>仅适用于上述示例...我不知道word-spacing何时位于该行的开头，这取决于它是如何形成的折叠（对于给定的窗口宽度）。

CSS {{1}}似乎可能是此处的修复，但它似乎只是字间距，所以它不起作用。

有没有办法用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.

Answer 2

使用直接同级选择器。

＆＃13;

code {
  margin-left: 10px;
  margin-right: 10px;
}
br+code{
  margin-left: 0;
}

＆＃13;

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

＆＃13;

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

2 个答案: