设置display:block后链接文本外区域可点击，如何保留属性修复？

当给 <a> 标签设置 display: block 时，它会默认占据父容器的全部可用宽度，因此文本右侧的空白区域也会被纳入链接的可点击范围。以下是两种保留 display: block 同时修复该问题的方案：

方案一：限制块级链接的宽度为内容宽度 #

通过添加 width: fit-content 属性，让块级链接的宽度自适应文本内容，避免撑满父容器。这种方式最简单直接，适合不需要链接占满父容器宽度的场景：

#footer-text {
    display: block;
    width: fit-content;
}

方案二：分离布局与点击区域 #

如果需要链接保持块级元素的布局特性（比如上下外边距、换行等），但仅让文本区域可点击，可以通过内部包裹元素接管点击事件：

修改后的HTML： #

<section>
    <div>
        <div>
            <a href="" id="footer-text">
                <span>Hello World</span>
            </a>
        </div>
    </div>
</section>

修改后的CSS： #

#footer-text {
    display: block;
    pointer-events: none; /* 禁用链接本身的点击事件 */
}

#footer-text span {
    pointer-events: auto; /* 让内部span恢复点击事件 */
}

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