<a>が私の<img>のサイズで拡大しないのはなぜですか？

Question

HTML構造

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

CSS：私はGoogle Chromeの要素-インスペクタを使用してheightが40px

ライブビジュアル（<a>の）であることに注意

: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; 
} 

例here

Answer 1

<a>はインライン要素です。いくつかのCSSを試す：

#header_div { 
    overflow: hidden; 
} 

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

<a>したがって、そのような「高さ」と構造特性に従わない（「と」を除く）、インライン要素です。これはdisplay: block;によって解決されます。

ブロック要素は、デフォルトでは親の全体の幅として占有されますが、<a>要素は画像の周りをきちんと囲む必要があります。これはfloat: left;によって解決されます。

<a>要素は<a>フロート崩壊#header#header内のオブジェクトのみであるため。これはoverflow: hidden;によって解決され、安価な "clearfix"です。

境界線や背景が目立つコンテナボックス内にフロートが含まれている場合、そのフロートは、フロートが高くなるにつれてコンテナの下端を自動的に押し下げません。その代わりに、floatはコンテナによって無視され、フラグのようにコンテナの底から垂れ下がります。

出典：http://www.positioniseverything.net/easyclearing.html

Answer 2

IMGを#header_divするdisplay:block;を追加してみてください。それは私のために働いた。