如何在行之间和“段落”之间获得不同的间距？

Question

我有一个框，其中的文本以跨度显示。我使用 line-height 来改变一个部分内的间距，但需要有不同的部分之间的距离。

查看此页面上的橙色框： https://theslowroad.org/category/destinations/asia/laos/#

我尝试使用边距和填充，但似乎没有效果。

        '<span class="boxhead">' . 'Major stops:' . '</span>' . '<span class="boxtext">' . $where . '</span>' . '<br>' .
        '<span class="boxhead">' . 'Memorable moment:' . '</span>' . '<span class="boxtext">' . $moment . '</span>' . '<br>' .
        '<span class="boxhead">' . 'Did you know?' . '</span>' . '<span class="boxtext">' . $fact . '</span>';
    ?> 

CSS：

.boxhead {
    margin-right: 18px; 
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    padding-bottom: 19px;
}

.boxtext {
padding-bottom: 19px;
}

.infobox {
    line-height: 1.2em;
    clear: both;
    background-color: #bf593a;
    color: white;
    padding: 5%;
    border-radius: 10px ;
    margin-left:6%;
    margin-right: 6%;
    margin-top: 8%;
    margin-bottom: 10%;
}

谢谢！

Answer 1

一种简单的方法是将 .boxtext 选择器更改为：

.boxtext {
  padding-bottom: 19px;
  display: inline-block;
}

但我建议将所有 span.boxhead span.boxtext 类与 <div class="boxgroup"> 分组

'<div class="boxgroup"><span class="boxhead">Major stops:</span> <span class="boxtext">' . $where . '</span></div>' .
'<div class="boxgroup"><span class="boxhead">Memorable moment:</span> <span class="boxtext">' . $moment . '</span></div>' .
'<div class="boxgroup"><span class="boxhead">Did you know?</span> <span class="boxtext">' . $fact . '</span></div>';

（还冒昧地删除了多余的字符串连接，希望你不介意。）

并将 .boxtext 选择器更改为：

.boxgroup {
  padding-bottom: 19px;
}