定价表格标题边框与标题元素重叠？求解决方法

你的问题主要出在标题容器的内边距设置、垂直居中方式上，同时伪元素的定位也需要微调，我来帮你一步步修复：

问题分析 #

• .avra_pricing_title 同时设置了固定 height:70px 和 padding:29px 0，这导致容器内部可用高度只剩 70 - 29*2 = 12px，而 <h3> 本身带有默认外边距和行高，必然会超出容器范围，和下方的伪元素三角形重叠。
• 原有的 text-align:center 只能实现水平居中，垂直居中的方式不合理，导致标题位置偏移。

修改后的完整CSS代码 #

.avra_aside_left_content { box-shadow: 0px 1px 4px 0px gray; background: white; }
/* 修复标题容器的居中逻辑与内边距 */
.avra_aside_left_content .avra_pricing_title { 
    background: #317579; 
    height: 70px; 
    /* 使用flex实现精准的水平垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; 
    margin-bottom: 45px; 
    position: relative;
    /* 移除挤压内容的上下内边距 */
    padding: 0; 
}
/* 清除h3默认外边距，避免影响居中效果 */
.avra_pricing_title h3 {
    margin: 0;
}
.bottom_ptable { background: #F0F8F8 }
/* 优化伪元素定位与适配，避免覆盖标题 */
.avra_aside_left_content .avra_pricing_title::after { 
    content: ''; 
    display: block; 
    clear: both; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    border-top: 48px solid #317579; 
    border-bottom: 0px solid transparent; 
    /* 用50vw实现自适应容器宽度的三角形，固定宽度场景可改回原像素值 */
    border-left: 50vw solid transparent; 
    border-right: 50vw solid transparent; 
    top: 100%; 
    overflow: hidden;
    /* 降低层级确保不会覆盖标题文本 */
    z-index: -1;
}
.avra_main_aside { margin: 80px 0px 30px; }
.avra_main_aside .avra_aside_items li { list-style: none; margin: 9px 0px; font-size: 16px; }
.avra_main_aside .avra_aside_items { margin: 75px 50px 31px; box-sizing: border-box; overflow: hidden }
.avra_main_aside .avra_aside_items li span.glyphicon { color: red; padding-right: 13px; }
.avra_aside_notice p { font-size: 16px; text-align: center; margin-bottom: -25px; }
.avra_aside_notice .bold_notice { color: red }
.avra_main_aside .avra_price p { font-size: 36px; text-align: center; margin: 61px 0px 15px; padding-top: 20px; color: #f74a3f; }
.avra_main_aside .avra_price p del { color: gray; font-weight: normal; }
.avra_main_aside .avra_buy_btn { padding-bottom: 1px; }
.avra_main_aside .avra_buy_btn a.btn-danger { border-radius: 0; margin: 0px auto 23px; display: table; background: #F74A3F; font-weight: bold; border: none; padding: 10px 12px; color: white; }

关键修改说明 #

1. 标题完美居中：将 .avra_pricing_title 改为flex布局，通过 align-items:center 和 justify-content:center 实现精准的水平垂直居中，同时移除了挤压内容的上下内边距。
2. 清除默认样式干扰：添加 .avra_pricing_title h3 { margin:0; }，消除浏览器默认的h3外边距对居中效果的影响。
3. 伪元素优化：把伪元素的左右边框改为 50vw 实现自适应容器宽度（如果你的容器是固定宽度，也可以改回原像素值），同时添加 z-index:-1 确保它不会覆盖标题文本。
4. 避免内容溢出：移除原padding后，标题容器的高度完全用来容纳文本，不会再出现内容超出容器与伪元素重叠的问题。

直接替换原CSS代码后，标题就会完美居中在绿色区域，同时和下方的三角形边框完全分离啦~

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