[ bootstrap ] 图片内容占用padding的范围，如何解决？

问题描述：

从效果图看到，图片内容占据了padding的范围，怎么解决呢？

 

html代码

<div class="container">
    <div class="row">
        <!-- 头像+edit按钮 -->
        <div class="col-sm-3">
            <!-- 头像 -->
            <div class="row">
                <div class='avatar'>
                        <img src="../assets/avatar.png" alt="" class="rounded img-fluid w-100" >
                </div>
                <p>按钮</p>
            </div>
        </div>
    </div>
</div>

效果

来源：https://www.cnblogs.com/remly/p/12005135.html