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 {}

Answer 2

尝试将图像设置为块元素：

#prof_picture { display:block; }

或者您可以将其设置为与底部对齐（仅在其内联（或内联块）元素时才起作用），尽管我认为可能存在可能产生不需要的结果的情况或环境。

#prof_picture { vertical-align: bottom; }

默认情况下（除非另有说明），图像是内联元素。大多数浏览器会在此处保留一些额外空间，但您也可以通过将父级line-height设置为零来对此进行反击。

#portrait{
    line-height: 0;
}

Answer 3

我建议你摆脱边界：没有;通过#prof_picture。你也可以尝试在#portrait li这个

上写边框

 border: 1px solid black;

因为这是写边框的正确方法。

Answer 4

如果您使用某些浏览器....您需要在css中设置它：

img{
    outline:none;
}

Answer 5

在line-height: 0;上设置font-size: 0;，display: inline;或#profile将其修复为小提琴http://jsfiddle.net/CyV7j/6/

在img元素周围添加了4px的额外空间，因为内联元素（行img）在表行内呈现的方式。

请考虑使用类而不是ID进行样式设置。并限制表格用于表格数据，而不是用于照片布局。