2012年12月18日(火)

ワードプレスで画像の下にスペースができてしまう場合の対処方法

ワードプレスのテーマによっては画像を表示させたときに、下にわずかなスペースが出来てしまう場合があります。

背景が白であればそんなスペースは目立つこともないのでほとんど気になりませんが、下の画像のようにマウスオーバーしたときに背景色を変えるようにしていた場合はこのスペースがとても目立ちます。

画像の下にできてしまうスペース

そこで下のコードのようにブロックのimgに指定してあげましょう。

この方法は画像の下に文字を書く場合に余計な隙間ができてしまう事も防げますので、隙間なく文字を書きたい場合にも有効です。

.post-content-single p img {
	margin:0;
	padding:0;
	vertical-align:bottom;
}

施策したサイトはTOPICKというブログです。
そこのテーマでは記事のブロックは「post-content-single」となっていますので、そのテキストブロックである「p」の「img」に指定しました。
お使いのテーマにあわせて変更しお使い下さい。

「padding:0;」「margin:0;」はすぐ考え付いたんですが、それだけではダメで「vertical-align:bottom;」も指定しないといけなかったんですね。


コメントを残す

*」は入力必須項目


  • © 2010-2017 試行錯誤 All Rights Reserved.