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

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

WBOY

リリース： 2016-06-21 09:17:30

オリジナル

1022 人が閲覧しました

最近は少し忙しくて、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 もになりますベースラインが影響を受けます、それが問題です