自由気まままMENUCLOSEサイトメニューWeb制作フリーランスブログネタプロフィールお問い合わせCLOSESEARCHWeb系フリーランスがWeb制作やガジェット、ブログについて綴っていきますWeb制作フリーランスブログネタプロフィールお問い合わせHOMEWeb制作imgタグで画像を配置した時に発生する隙間・ズレの対処法imgタグで画像を配置した時に発生する隙間・ズレの対処法2019年4月29日Web制作ツイートシェアはてブ送るPocketimgタグを使用して画像を配置した時、画像の下にびみょーな隙間が出ることがあります。以下例だと、画像とmargin(オレンジ部分)の間にちょっとだけ隙間ができているのがわかります。※検証で見るとわかりやすい一見大したことないように見えますが、この隙間のせいで配置が微妙にズレたりすることがあります。したがって、今回はこの隙間を解消する方法をお伝えします。以下、記事に入ります。bottomを指定します(middleでも可)これだけでOK。bottom;}これを先ほどのimgに指定してみると、この通り隙間が消えています。上記の記述を自分のCSSにあらかじめ指定しておくと、画像が出てくるたびに消す必要がないので便利です。baselineが指定されています。baselineがかかった状態のインライン要素であるimgを、divやfigureなどのブロック要素で囲ってしまうと隙間が発生してしまいます。そのため、vertical-alignの指定をbottomやmiddleにすることで隙間が解消できるというわけです。blockを指定しても隙間を解消することができます。隙間ができる原因がインライン要素なのであれば、ブロック要素に変えてしまおうという考え方ですね。block;}まとめimgタグの隙間問題について、ご理解いただけたでしょうか。小さな問題ですが、この隙間が邪魔でうまく画像が中央に寄らないなどの問題が発生します。悩まされないように、対策を覚えておきましょう。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。