无法去除p标签加粗效果及段落间距调整技术求助

阿华AIGC实验室

2026-5-28

解决你的两个问题：去除地址加粗效果 & 缩小段落间距

1. 让地址部分显示为常规字体（消除加粗）

你的CSS中.content-header p设置了font-weight: inherit，这意味着段落会继承父元素的字体粗细——如果上层元素（比如body或容器）默认有加粗属性，地址段落就会跟着变粗。要让地址恢复常规字体，最直观易维护的方法是给地址段落加自定义类，再通过CSS指定字体粗细：

修改HTML：

给所有地址相关的<p>标签添加address-line类：

<p class="address-line">Pennine Tools Aerospace Ltd</p>
<p class="address-line">Unit 1</p>
<p class="address-line">Ravenscroft Business Park</p>
<p class="address-line">Jackdaw Road</p>
<p class="address-line">Barnoldswick</p>
<p class="address-line">Lancashire</p>
<p class="address-line">BB18 6DX</p>

添加CSS规则：

在style.css中新增以下代码：

.content-header .address-line {
    font-weight: normal;
}

另外，你HTML里大量重复的style="color: black;"可以统一放到CSS里管理，删掉内联样式更清爽：

.content-header p {
    color: black; /* 替换原来的#fff，覆盖内联样式优先级 */
    /* 其他原有属性保留 */
}

2. 缩小段落之间的间距

段落默认的间距来自p元素的margin属性，你可以直接修改.content-header p的margin值来调整：

修改现有CSS规则：

.content-header p{
    color: black;
    font-size: 1em;
    font-weight: inherit;
    word-spacing: 0.2em;
    /* 调整上下边距，默认通常是1em左右，这里设为0.2em缩小间距 */
    margin: 0.2em 0;
}

同时建议删除HTML里的空段落标签<p> </p>，这些标签会额外占用空间，用CSS的margin控制间距更灵活可控。

内容的提问来源于stack exchange，提问作者Aadil Mangera