为什么我的<a>不会随着我的<img>的尺寸而扩展？

Question

HTML结构

<div id="header_div">
    <a href="#">
        <img width="250" height="75" src="./images/header_logo.png">
    </a>
</div>

CSS:

:hover{
outline:1px dotted red;/*this line help us to actually see*/
}

#header_div{
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px;
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
border:1px solid #477BA3;
border-bottom:0;
background:#5BA2D9 url('./images/header_bg.png') repeat-x left bottom;
}

#header_div img{
border:0;
padding:5px 10px;
}

我用谷歌Chrome元素督察,并指出height是40px(的<a>)

这里有直播视觉示例

Answer 1

因为<a>是内联元素.尝试一些CSS:

#header_div {
    overflow: hidden;
}

#header_div a {
    display: block;
    float: left;
}

<a>因此是一个内联元素(除了"with")它不遵守诸如"height"之类的结构属性.这是通过解决的display: block;.

默认情况下,块元素占据其父元素的整个宽度,但您希望<a>元素紧紧包裹在图像周围.这是通过解决的float: left;.

因为<a>元素是内部唯一的对象#header,所以浮动#header时会折叠<a>.这是通过overflow: hidden;廉价的" clearfix "解决的.

当浮子包含在具有可见边框或背景的容器盒内时,浮子不会自动强制容器的底边向下,因为浮子更高.相反,容器会忽略浮动,并像旗帜一样从容器底部垂下.

资料来源: http ://www.positioniseverything.net/easyclearing.html