多行Banner文本左侧对齐不均问题求助

问题根源 #

问题出在给<p>标签设置了display: inline——inline元素换行时，无法让内边距均匀包裹每一行，会导致文本左右偏移、内边距不一致的情况。

解决方案 #

将<p>标签的display属性改为inline-block，同时清除默认边距，即可解决对齐和内边距问题。以下是修改后的完整代码：

修改后的CSS代码 #

/* Full-width image with ribbon text */

.ribbon-header-hero {
  position: relative;
  margin-bottom: 3rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ribbon-header-hero img {
  object-fit: cover;
  width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 0;
}

.ribbon-hero-text-blue, .ribbon-hero-text-white {
  text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 2%;
  max-width: 90%;
}

.ribbon-hero-text-blue p, .ribbon-hero-text-white p {
    display: inline-block; /* 替换原有的inline属性 */
    font-size: 1.4rem; 
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 195% !important;
    text-align: left;
    padding: 7px 14px;
    vertical-align: baseline;
    text-transform: uppercase;
    margin: 0; /* 清除p标签默认外边距 */
}

.ribbon-hero-text-blue p {
  background-color: #2774ae;
  color: #ffffff;
}

.ribbon-hero-text-white p {
    background-color: #fff;
    color: #2774ae;
}
  
@media (min-width: 1100px) {
   .ribbon-hero-text-blue, .ribbon-hero-text-white {
     max-width: 70%;
     margin: 5%;
   }
   
   .ribbon-hero-text-blue p, .ribbon-hero-text-white p {
     font-size: 1.7rem;
       line-height: 1.85em !important;
   }
}

@media (min-width: 1300px) {
   .ribbon-hero-text-blue p, .ribbon-hero-text-white p {
     font-size: 2.2rem;
       line-height: 1.75em !important;
   }
}

关键修改说明 #

• display: inline-block：让元素保留块级特性，能正确应用内边距，换行后每一行的左右内边距保持一致，文本对齐也会统一。
• margin: 0：清除p标签默认的上下外边距，避免额外间距干扰布局。

修改后，两行文本会完全左对齐，ribbon各边内边距均等，背景色也能完整包裹每一行文本，符合预期布局效果。

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