バナー広告の下にできる余分な隙間をなくすには？

サイドバーに広告ウィジェットを置いていますが、A8やもしもの広告を貼ったら、下に謎の隙間ができてしまうように。

まぁ気にするほどでもないと言えばないかも知れませんが・・・

・・・気になる～(笑)

下に貼ってみます、環境によるかも知れませんが、多分、隙間ができている状態だと思います。(Chrome・Firefox・IE11では出ました)

下の赤斜線の部分です



考えられる原因

(1)WordPressを使っている人は、自動改行機能が悪さしているかも知れません。WordPressは改行すると自動的に改行タグを挿入してしまうので、その場合はコードを改行せずに一行にすればOKです。

(2)画像の下に謎の隙間ができる問題かと思ったのですが、今回は関係なかったようです。

(3)画面の幅が足りていなかった

※今回はこれだったようです。この広告タグはスクリプトを使わず画像にリンクを貼るだけのシンプルなものになっていますが、解析用の１ドットの画像が一緒に読み込まれるようになっています。

そのドット（１ピクセルの画像）が、画像の領域が足りずに下に折り返してしまう事で、領域の高さの計算がおかしくなるようですね。

試しに幅を広げてみると、出なくなります。

padding を10pxとっていますので、左右で20pxプラス枠線の幅1pxずつとドットのサイズ分で323px（Border-Boxで計算されているので枠線等追加すると領域がその分狭くなっているわけですね）、323ｐｘではダメで324pxで折り返さなくなりました（その分横に幅が増えてますが、1pxで済んでいるので、言われなければ分からないですね）

---

別の解決方法として、この１ドットの画像のpositionをabsoluteにしてもOKでした。

これだと、ドットは右上の角に行ってるようです。

しかし、ほとんどのアフィリエイトでタグの改変は禁止されていますので、この程度は改変には当たらないと個人的には思うのですが、ダメと言われるかも知れませんね。

---

まぁそんな事しなくても、領域の縦方向のサイズをキチンと指定してやれば、この隙間はでなくなりますので、そのほうがスマートでしょうか。（ただそれだと縦方向のサイズが固定になってしまうので、縦長のバナーなどが表示できなくなりますが。）

---

結論としては、領域の幅に少し余裕を持たせる、というか、2pxくらい、左右の余白を減らしてやるのがスマートですね。。。