为何padding搭配border-radius时头像顶部圆角失效？

我在开发登录页面时碰到个问题：用padding-top设置头像和页面顶部的间距时，头像的border-radius只有底部圆角生效，顶部左右圆角没效果；但换成margin-top就能正常显示圆形头像。

相关代码 #

HTML代码

<img src="img/avatar-01.jpg" alt="" class="Image">

使用padding的CSS代码

.Image {
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    padding-top: 120px;
}

使用margin的CSS代码

.Image {
    border-radius: 50%;
    margin: 125px auto 10px 612px;
}

原因分析 #

• padding是元素内部的间距，给图片加padding-top等于在图片自身顶部加了一块空白区域，这部分空白属于元素的盒模型范围，但图片的实际内容会被挤到这个空白区域的下方。此时border-radius是作用在整个元素盒模型上的，顶部的圆角其实是加在空白区域上，自然看不到；而底部圆角作用在图片内容上，所以能显示出来。
• margin是元素外部的间距，它不会改变元素自身的大小和内部布局，只是把整个图片元素向下移动，图片内容依然填满整个元素盒模型，所以border-radius:50%能完整作用在图片内容上，呈现出圆形效果。

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