如何使用CSS为句子中的特定单词设置margin/padding属性

首先你要先知道一个基础CSS规则：<span>默认是inline（行内）元素，垂直方向的外边距（margin-top、margin-bottom）对默认状态的行内元素是不生效的，直接写margin-bottom属于无效代码，不会有任何视觉效果。

正确的CSS代码如下：

.span1 {
  display: inline-block;
  /* 把下面的数值替换成你实际需要的边距大小即可，比如4px、0.3em都可以 */
  margin-bottom: 8px;
}

注意事项 #

• 必须加display: inline-block：这个属性值会让元素同时具备行内和块级元素的特性：既不会像块级元素那样独占一行，能和前后的"We rise by"、"others up"保持在同一行，不破坏原标题的正常文本流；又支持块级元素的盒模型规则，垂直方向的margin、padding都能正常渲染生效。
• 不要用display: block替代：如果设置为块级模式，"lifting"这个单词会单独占据一行，前后的文本都会被挤到上下行，原本连贯的标题会被拆成三段，完全不符合原有的排版需求。

内容的提问来源于stack exchange，提问作者Abhishek Srinivasan