なぜaラベルにimgを使用した後の高さはいくつかの画素が多いのですか?(回転)
4387 ワード
これは多くの先端初心者が直面している問題です!
1、まず、
ボックスモデルについて!cssの公式を見に行くことをお勧めしますhttp://www.w3.org/TR/CSS2/あるいはネット上の多くの文章があります!http://www.tedlife.com/kuang_mo_xing_zhong_lei_fan_wei_he_shu_xing_yi.html 2、
3、この問題のいくつかの解法をまとめる:[a]ベースラインを処理する
[b]
[c]行の高さが設定されていない場合はフォントサイズを削除できます.
1、まず、
<a>ラベルはinlineで、ボックスモデルは:行内ボックスです.行の内枠には画像の表現が含まれておらず、<img>のラベルは道路に置かれているようだ.だからimgを箱に入れるようにするには、ブロックボックスを使用します.たとえば、次のようにします.display:block;
/* */
display:inline-block;
ボックスモデルについて!cssの公式を見に行くことをお勧めしますhttp://www.w3.org/TR/CSS2/あるいはネット上の多くの文章があります!http://www.tedlife.com/kuang_mo_xing_zhong_lei_fan_wei_he_shu_xing_yi.html 2、
<img>ラベルはどうして下の空白があるのですか?これはいわゆる「ベースライン(baseline)」を理解する必要があります.これは英語のレイアウトの概念です.私のところはやはり知っている人のリンクを引用しましょう!http://www.zhihu.com/question/21558138 話が行き届いている. 3、この問題のいくつかの解法をまとめる:[a]ベースラインを処理する
a{display:block;}
img{vertical-align: bottom;}
[b]
<a>ラベルの行高を強引に取り除くa{display:block;line-height:0px;}
[c]行の高さが設定されていない場合はフォントサイズを削除できます.
a{display:block;font-size:0px;}
a ， ， vertical-align baseline ， line-height ， line-height， ， baseline ， ， ， a 。 ， a line-height:0 font-size:0; vertical-align:top， top ， baseline img display:block， ， ，