ホームページ > 記事 > ウェブフロントエンド > CSS 目に見えないギャップ (インラインピット)_html/css_WEB-ITnose
CSS 目に見えないギャップ (インラインピット)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:17:301022ブラウズ
最近は少し忙しくて、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="js.png" /> </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 もになります ベースラインが影響を受けます、それが問題です