javascript - div 上的奇怪填充

Question

灰色边框不应该可见，它应该被黑色边框覆盖，我不明白为什么它不会...这是 CSS 代码:

#portrait{
  width:120px;
  height:100px;
  top:20px;
  border: solid black 1px;
  margin: 0px;
  padding: 0px;
  cursor:pointer;
}

#prof_picture{
    width: inherit;
    height: inherit;
    border: none;
}

HTML(在表格内):

<td id="portrait">
    <img id="prof_picture"></img>
</td>

和javascript

$("#prof_picture").attr('src',"profile/loading.gif");

我必须让 DOM 继承部分属性，因为当使用该 javascript 行时，图像会采用其自然宽度和高度，而我希望它只适合肖像。当我这样做时，出现了奇怪的边框。你知道为什么吗？

Answer 1

将font-size: 0; 添加到#portrait{}