我正在使用< 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字间距似乎可能是这里的修复,但它似乎只是字间距,所以它不起作用.
有没有办法用CSS实现这个目标？
解决方法
我只能找到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.
