CSS 目に見えないギャップ (インラインピット)_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS 目に見えないギャップ (インラインピット)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:17 AM

最近は少し忙しくて、node-で作ったデスクトップアプリケーション(github:Portal)をいじっています。 webkit (mac 版の atom-shell) あまり書いていませんが、これを作成中に問題が発生したので、情報を確認したり、議論したり、調べたりするために来ました...

まずデバッグコードを見てみましょう

<!DOCTYPE html><html>  <head>  <style media="screen">    div {      display: inline-block;      background-color: yellow;      padding: 2px;      /*font-size:0;*/    }    img {      /*vertical-align:bottom;*/      /*display: block;*/    }    span {      font-size:80px;    }  </style> </head>  <body>    <div>      <img  src="/static/imghwm/default1.png"  data-src="js.png"  class="lazy"   / alt="CSS 目に見えないギャップ (インラインピット)_html/css_WEB-ITnose" >    </div>     <span>phantom</span>  </body></html>

それはごく普通のことです div を使用して img をインストールし、div を img より 1px 大きくします (境界線に似ています) しかし、ここで問題が発生します。上:

明らかに、黄色の部分は div のパディングですが、下のパディングはより大きいです。

3 つの解決策があります (つまり、CSS でコメントアウトした 3 行):

Add --

親要素に

1:font-size:0;

または、img 要素に -- を追加

2:vertical-align:bottom;

3:display: block;

しかし、なぜこれなのでしょうか?普通の猿は間違いなくそれを使用でき、問題を解決するには十分です。しかし、私たちは普通の猿ではありません、私たちはプログラマーです!!!

よく考えた結果、 font-size:0; は解決できるはずです。フォントに関連しています。

理由を説明するために、理解を助けるためにさらに 2 枚の写真をカットしました。上の写真:

最初の写真では、コンソールを同じ場所に移動したときに、物差しとして使用しました。 divのパディングと同じサイズにすると、Pの下部だけがブロックされていることがわかり、残りはコンソールから同じサイズのギャップがあるように見えたので、再度カットしました。

vertical-align です。 font-size が 0 の場合、ベースラインにギャップがないので、それが問題を解決するベースラインになるはずです~

調べてみたところ、デフォルトのベースラインであることがわかりました。

これを書いていて、以前2つのinline要素の間に隙間があったことを思い出し、それを親要素にも追加しました。今回は、img に block を追加することで問題を解決できます。最終的には、すべての inline 要素のフォントサイズと行の高さが同じであることが原因です。属性はテキストなので、img もになりますベースラインが影響を受けます、それが問題です

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。