CSSfacebookTweethatenaline2019.09.26レシピレイアウト画像を設置した時にできる隙間を無くすimg要素で表示した画像にわずかにできる隙間を消す方法を解説します。画像の下に生じる隙間を解消する改行による隙間を解消する画像の下に生じる隙間を解消する画像はそのまま表示すると、勝手に余白が生じることがあります。余白が分かりやすいよう、親要素に背景色でグレーを敷いています。この余白を消すには、vertical-alignプロパティを指定します。alt="基礎から応用まで!HTML&CSS"></figure>今回は値に「bottom」を指定していますが、「top」や「middle」でも大丈夫です。今回のvertical-alignプロパティを使っても隙間が消えない場合は要素サイズが余分に大きい可能性があるため、line-heightプロパティを併せて指定してみてください。1.0em;}改行による隙間を解消するHTMLのimg要素やp要素にはフローコンテンツ、記述コンテンツ、セクショニングコンテンツなど、それぞれの要素が属する「カテゴリー」があります。HTML4以前ではブロックレベル要素、インライン要素に分かれていました。inline;」のように記述することがあると思います。これらのカテゴリーのうち、フローコンテンツ(インライン要素)は記述したソースに改行がある場合、ブラウザで表示するとソースの改行がそのまま表示されてしまうため隙間ができてしまいます。次のようなHTMLのソースを記述したとします。その3"></body>こちらのHTMLをそのまま表示すると、次のように画像と画像の間に隙間ができます。この現象を回避するには、次の2通りの方法があります。ソースの改行を削除する1つ目の方法はCSSなどは使用せず、HTMLコードにある改行を直接削除することで隙間を非表示にします。先述のコードであれば、次のようになります。その3"></body>改行を削除しただけですが、こちらのHTMLをブラウザに表示すると隙間は消えます。非常に簡単な解決方法ではありますが、改行がなくなることでimg要素が連続していてやや見づらいソースになってしまう点がデメリットです。display:block;を使う2つ目の方法はHTMLは変更せず、CSSで解決します。以下のサンプルコードは必要最低限の記述となるようhtml要素やtitle要素は省略しています。block;」を適用し、さらにfloatプロパティで横並びにしています。ブラウザの表示は1つ目の方法と全く同じですが、2つ目の方法はHTMLコードが見やすいため、後々のメンテナンスなどにも影響を与えないため、どちらかというと2つ目の方法がオススメです。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND人類を前に進めたいチームラボ代表・猪子寿之さんと評論家・宇野常寛さんによる、チームラボの目指す「境界のない世界」についての対談がまとまった一冊。内容はもちろん、フルカラーで写真も綺麗でした。