如何去除p标签内容与左侧边框之间的多余空白间距

解决方案 #

p标签左侧出现空白由两个原因共同导致，按以下步骤修改即可实现内容紧靠左边界展示：

• 重置浏览器默认样式：在p标签的style属性中添加padding-left: 0，可同步添加margin-left: 0清除默认左外边距，避免不同浏览器的默认样式差异影响效果。
• 清除标签内多余空白：删除p标签内部文本开头的所有换行和空格缩进，HTML会把标签内连续的空白字符合并为一个空格，这些缩进是左侧空白的主要来源之一。

修改后的代码示例 #

<p style="color:#e72b78; font-weight: bold; border-top:#e72b78 2px solid; border-bottom:#e72b78 2px solid; padding-left: 0;">Primary end point:</p>

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