2012-03-24 11 views
2
<div id="head-ads"> 

    <img id="ad-home-head-1" src="images/blank-ad.png" /> 
    <img id="ad-home-head-2" src="images/blank-ad.png" /> 

</div> 

これはHTMLコードです。 2つの画像は、それらの間に空白を入れずに、同じライン上に互いに隣り合って表示されるはずです。私のCSSは、これらの2つのインラインイメージの間に余白やパディングがないようなものです。しかし、2つの画像の間に3ピクセルの空白が表示されます。今ページ上の画像間のスペースですが、HTML/CSSでソースを見つけることができません。

、私はHTMLファイル内の改行を削除します。

<div id="head-ads"> 

    <img id="ad-home-head-1" src="images/blank-ad.png" /><img id="ad-home-head-2" src="images/blank-ad.png" /> 

</div> 

空白の3個のピクセルが消えます。

だから、文字エンコードの問題などが考えられていました。しかし、HTMLファイルは、UTF-8として保存され、そのページが使用するように定義されているものもある。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

HTMLコード内の改行は、画像間の空白の3つの画素を追加する理由上の任意の考えをブラウザで見ると?これはFireFoxとMac OS XのChromeで確認されています。

これらのファイルはWordPressテーマの一部です。しかし、それは私が最初から作成したテーマだったので、HTMLとCSSは私が100%知っています。それはとても簡単です。私はPHPやワードプレスが何か奇妙なことをしているのかどうかはわかりません。しかし、HTMLを理解すると、コードに改行を追加するとブラウザに空白が追加されないはずです。

答えて

2

書き込みfont-size:0#head-ads DIV。このように書く:

#head-ads{ 
font-size:0; 
} 
img{ 
vertical-align:top; 
} 
+0

フォントサイズに空きがないことを確認してください

#head-ads img { border: 0; display: block; margin: 0; padding: 0; float: left; } 

を試し:0; #頭の広告のためにそれを世話した。フォントサイズをスタイルにするべきではないので、これはまだ私にとって奇妙です。 – JLH

関連する問題