html - 如何在行之间和“段落”之间获得不同的间距?
问题描述
我有一个框,其中文本以跨度显示。我使用 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%;
}
谢谢!
解决方案
一种简单的方法是将 .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;
}
推荐阅读
- python - 使用 bat 文件打开 Streamlit 会导致 File Not Fund 错误
- paper-trail-gem - 纸迹协会
- macos - 如何获取 .command 文件的当前目录路径 - macOS
- kivy - 重新加载由 Kivy 中的相机小部件存储的图像
- node.js - 是否可以在 NodeJs 中同时使用工作线程 + GPU.js?
- javascript - 如何从特定标签获取输入值并使用 jQuery 对所有值求和?
- python - 从 linux bash 脚本激活 python 虚拟环境
- azure - 在不使用数据流的情况下在 Azure 数据工厂中动态增加 ID 的问题
- regex - 正则表达式:不以连字符开头的大写单词
- python - Python:Raspberry Pi 上的 Google 表格 API