p标签内br换行后文本左对齐异常的原因及解决方法

原因 #

你的HTML代码里，<br>标签后面跟着一个空格，浏览器会把这个空格解析成可见空白，再加上部分无衬线字体的字母（比如L）本身的左侧间距设计，就会让第二行的L看起来左侧有多余空白。

解决办法 #

方法1：清理HTML中的多余空格（优先推荐） #

直接删掉<br>标签后的空格，让换行文本紧跟标签，代码修改为：

<p class="footer-title">LET'S WORK<br>TOGETHER</p>

方法2：用CSS修正（无法修改HTML时使用） #

给.footer-title添加white-space: pre-line;属性，让浏览器自动合并多余空白：

.footer-title {
    font-size: 45px;
    color: #FF4545;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: left;
    font-family: sans-serif;
    white-space: pre-line;
}

内容的提问来源于stack exchange，提问作者Ethan Van den Bleeken