-1

次のサイトのline-heightプロパティで遊んでいました。

http://www.w3schools.com/css/tryit.asp?filename=trycss_float6

div.container
{
    width:100%;
    margin:0px;
    border:1px solid gray;
    line-height:150%;
}

私は行の高さについて理解しようとしました、そして私はこれを読みました：

ブロックレベルの要素では、line-height CSSプロパティは、要素内のラインボックスの最小の高さを指定します。

から：

https://developer.mozilla.org/en-US/docs/CSS/line-height#Examples

しかし、興味深いことに、上記のw3schoolsの例では、line-heightプロパティを変更すると、含まれているdiv要素のサイズが大きくなり、mozillaサイトで行われたステートメントと矛盾しているようです。したがって、実際にラインの高さが何をするのかを明確にすることができれば、私は大いに感謝します。

ありがとう

4

2 に答える 2

0

それは矛盾していません。にline-heightプロパティを設定するdivと、すべてのインラインの子に同じline-heightプロパティが適用されます。したがって、この例では、divにline-heightプロパティを設定することにより、すべての子要素display: inlineに新しいline-heightが適用されます。これらの子要素の高さが増加すると、親の高さがdiv増加して、子要素を含めることができるようになります。

于 2013-03-13T17:27:41.033 に答える
0

line-heightは、y軸に沿ってブロック要素を間に配置するときに実際に指定されます。

たとえば、私は1行のテキストを持っています

w3schools

パラの高さは20pxです。段落は独自のデフォルトの方法で記述されますが、line-heightが段落の高さと等しい場合、テキストは

W3schoolsはy軸に沿って中央に配置されると言います。テキストを水平方向に整列（x軸整列）する場合は、text-align：centerがこの目的に使用されます。

行の高さは、それ自体の要素の高さに完全に依存するわけではないことを忘れないでください。ただし、次のように変化します。

  1. 1行のテキストがある場合は、

    高さは20pxで、line-height：20pxを指定して、テキストを垂直方向に揃えるか、テキストの中央を垂直方向に配置します。

  2. 2行のテキストがある場合は、

    高さは20pxで、line-height：10pxを指定し、小さなパディングトップを使用してテキストを垂直方向に配置します。

これがあなたを元気づけてくれることを願っています。そして、私はあなたがグーグルをもっと閲覧する必要はないと思います。もっと説明が必要な場合は、jfiddleコードを提供します。:)

于 2013-03-13T17:40:55.840 に答える