html - 如何在行之间和 "paragraphs"之间获得不同的间距？

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;
}