当p标签里面字会自动变大的问题

最新推荐文章于 2022-05-16 12:07:00 发布

原创最新推荐文章于 2022-05-16 12:07:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

5 篇文章

订阅专栏

探讨了在使用CSS为HTML元素添加底线时遇到的文字大小变化问题，详细分析了问题出现的原因，并提供了一种通过调整display属性来避免该问题的有效解决方案。

HTML代码为：

<p class="bottom-u-line">我是有底线的</p>

CSS为：

        .bottom-u-line{
            font-size: @helpfulFontSize;
            color:@lineColor;
            &:before{
                content: '';
                display: inline-block;
                width: px2rem(80);
                height: px2rem(2);
                background-color: rgba(221,221,221,1);
                vertical-align: middle;
                margin-right: px2rem(20);
            }
            &:after{
                content: '';
                display: inline-block;
                width: px2rem(80);
                height: px2rem(2);
                background-color: rgba(221,221,221,1);
                vertical-align: middle;
                margin-left: px2rem(20);
            }
        }

此时若把元素的display设置为block；margin设置为0 auto希望能垂直居中时，p标签里面文字会变大。

解决办法：

        .bottom-u-line{
            font-size: @helpfulFontSize;
            color:@lineColor;
            width: 100%;
            display: inline-block;
            text-align: center;
        }

设置display为inline-block，此时则不会出现该问题。（PS：目前原因还不知道，希望能有大佬能解惑）