「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > コードで指定していないのに、画像の下に目に見えない余白があるのはなぜですか?

コードで指定していないのに、画像の下に目に見えない余白があるのはなぜですか?

2024 年 11 月 15 日に公開
ブラウズ:693

Why is There an Invisible Margin Below My Images, Even Though My Code Doesn\'t Specify It?

写真の下にある奇妙な目に見えない余白

この号で、著者は、Web ページの画像の下に目に見えない余白があることに遭遇しました。コードにそのような余裕があります。これは、インライン要素としての画像の性質によって引き起こされる一般的な問題です。

応答によると、画像のデフォルトのインライン動作により、テキストのベースラインと一致する画像の下部とテキストの下部の間にスペースが作成されます。テキスト行。これを解決するには、画像をブロック要素に変換することです。

簡単な解決策の 1 つは、display: block; を使用することです。これを達成するために。もう 1 つの方法は、float: left; を使用して画像を浮動させることです。

vertical-align、font-size、line-height などのプロパティの調整も間隔に影響を与える可能性がありますが、信頼性は低く、依然として影響を受けやすいです。

詳細については、次の関連質問を参照してください。

  • XHTML 1.0 の画像の下に不要なスペースがある厳密
  • 画像の間隔が余分に空いてしまうのはなぜですか?
  • IE の画像間隔の問題
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3