HTML Strict＆CSS：ギャップをどのように閉じますか？

次のWebページでは、画像とdivの間に数ピクセルのギャップがあります。（私はFirefox 3とSafari 4でテストしました）HTML Strict＆CSS：ギャップをどのように閉じますか？

ギャップをどのように閉じることができますか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
<head> 
    <title>Test Page</title> 
    <style type="text/css" media="screen"> 
     body 
     { 
      background-color: black; 
     } 

     img 
     { 
      width: 250px; 
      height: 70px; 
      border: 0; 
      margin: 0; 
      padding: 0; 
     } 

     div 
     { 
      background-color: white; 
      border: 0; 
      margin: 0; 
      padding: 0; 
     } 

    </style> 
</head> 

<body> 

<img alt="Stack Overflow Logo" src="http://is.gd/lEfE"> 
<div>text</div> 

</body> 
</html>

出典

2009-03-03 Patrick McElhaney

画像は、インライン要素であり、それは、テキスト行のベースライン上に配置されています。ギャップは、ベースラインとテキストラインの底部との間の距離である（すなわち、「g」および「j」のような文字を垂らすためにベースラインの下に必要なスペース）。

は、画像ブロック要素作成し、ギャップが消える：

display: block;

出典

2009-03-03 21:50:52 Guffa

これは私にとって最高の解決策のようです。確かに、そのロゴの右に何かを置いておきたいときは、浮かんだり、他の面倒なことを心配しなければなりません。 –

もちろん、イメージを別のdivに配置するなど、テキスト要素として扱われないようにするには、他の方法もあります。それをフロートにするとブロック要素にもなります。位置を使用する：相対;レイヤーにすることもできます。 – Guffa

イメージタグとdivタグの改行を削除します。

出典

2009-03-03 21:49:25

有効なCSSを – sblundy

これはSafariで動作しません。しかし、Guffaの答えは – Chuck

でも、Firefoxでは動作しません。 –

<img>行と<div>行のHTMLの改行を削除します。

なぜなら、HTMLは改行をスペースとして扱うのは面倒です。

出典

2009-03-03 21:49:47

変更：

<img alt="Stack Overflow Logo" src="http://is.gd/lEfE"> 
<div>text</div>

：を

<img alt="Stack Overflow Logo" src="http://is.gd/lEfE"><div>text</div>

出典

2009-03-03 21:50:37

はあなたの<img> CSSやスタイル属性のいずれかにdisplay: blockを追加します。

Guffaが私を上記に殴った。

また、<img>を<div>にラップすることもできます。これは技術的に言えば、とにかく行う必要があります。ブロックレベル要素は、HTML仕様を正しく覚えていれば、<body>の子孫になることができます。その後、限り、あなたは行ってもいいでなければなりません<img>の近くと</div>の間に空白がないよう（つまりdivの内側に複数の画像を追加する柔軟性を持っている。

出典

2009-03-03 21:51:42

私はbodyの中にinline要素をHTMLで持たせるのは有効だと思いますが、XHTMLではそうではありません。いずれにしても、インライン要素とブロック要素をブロック要素内で混在させることは一般的に問題です。 – Guffa

表示ブロックが私のために動作しませんでしたしかし、これはありませんそれを負のマージン値付け - 。。。それは、悲しいことに、解決策ではなく、必要があることを

img { 
width : 250px; 
height : 70px; 
border : 0; 
margin-top : -11px; 
margin-left : -22px; 
padding : 0; 
}

は、必要に応じて調整

出典

2009-06-03 13:35:20

HTML Strict＆CSS：ギャップをどのように閉じますか？

答えて

関連する問題