web-dev-qa-db-ja.com

emの高さとは何ですか？

私はまだサイズin emの意味がわかりませんか？
CSSでpx、ptを使用しました。
0.8、1.0、1.2 emはどういう意味ですか？
CSSで次のような高さを見ました。高さ：0.8em;または高さ：1.2em;
どのように計算されますか？

csssizeheight
18
happyhardik

「em」の意味は長年にわたって変化しています。すべてのフォントに「M」の文字が含まれているわけではありません（たとえば、中国語）。ただし、すべてのフォントには高さがあります。したがって、この用語はフォントの高さを意味するようになりました。文字「M」の幅ではありません。

Emユニットを使用してフォントサイズを設定する簡単な例を見てみましょう。

<html>
  <style>
    h1 { font-size: 2em }
  </style>
  <body>
    <h1>Movies</h1>
  </body>
</html>

フォントサイズの指定に使用する場合、emユニットは親要素のフォントサイズを参照します。したがって、前の例では、h1要素のフォントサイズは、body要素のフォントサイズの2倍に設定されています。 h1要素のフォントサイズを見つけるには、bodyのフォントサイズを知る必要があります。これはスタイルシートで指定されていないため、ブラウザーはどこか他の場所から検索する必要があります。見やすい場所はユーザーの設定です。したがって、ユーザーが通常のフォントサイズを10ポイントに設定した場合、h1要素のサイズは20ポイントになります。これにより、ドキュメントの見出しが周囲のテキストと比較して目立つようになります。したがって、フォントサイズの設定には常にemsを使用してください。

詳細

27
simplyharsh

1emisequalから現在のフォントサイズ.

2emは、現在のフォントの2倍のサイズを意味します。

たとえば、要素が12 ptのフォントで表示される場合、「2em」は24 ptです。 「em」はCSSで非常に便利な単位です。リーダーが使用するフォントに自動的に適応できるためです。

他のCSSユニットへのリンクは次のとおりです。

http://www.w3schools.com/cssref/css_units.asp

17
Haim Evgi

1emは現在のフォントサイズと同じです。 2emは、現在のフォントの2倍のサイズを意味します。たとえば、要素が12 ptのフォントで表示される場合、「2em」は24 ptです。 「em」は、リーダーが使用するフォントに自動的に適応できるため、CSSで非常に便利な単位です。

詳細はこちら

3
Sotiris

Emは、文字「m」の幅です（現在のフォントとサイズ）。

2
Paul Schreiber

Paulは正しいですが、「M」は「m」ではありません。ただし、これは植字/印刷から派生した難解な定義であり、この場合はあまり役に立ちません。あなたにとって何が役に立つかという点では、フォントサイズのパーセンテージです。

2
prodigitalson

Emはキャラクターのサイズです。フォントサイズにより異なります。フォントサイズが24の場合、2Emはフォントサイズ24の2文字を保持するために必要なスペースと等しくなります。

ウィキから引用した通り。

Emは、タイポグラフィの分野における測定単位です。この単位は、現在のフォントのポイントサイズに対する文字の幅と高さの比率を定義します。

FYI： EnはEmの半分です。 0.5Em

2
Rakesh Juyal

Emは「エフェメラルユニット」を意味し、親要素の現在のフォントサイズを基準にしています。たとえば、_<h1>_見出しのテキストはデフォルトで2emです。これは、_<h1>_がその親要素であるドキュメントの_<body>_からテキストサイズを継承するという事実から来ています。 _<body>_ font-sizeを16pxに設定すると（font-size：16px;）。私の_<h1>_が2emの場合、2emは1emのサイズの2倍であるため、32pxのサイズを継承します。この場合、1em = 16pxなので2em = 2x16px = 32pxです。ここで、次のようにHTMLドキュメントを作成するとします。

_<body>
<h1>Hello world</h1>
<p>Lorem ipsum</p>
</body>
_

次に、次のCSSルールを定義します。

_body {font: normal 16px Arial, Helvetica, sans-serif;}
_

Webブラウザー（Chrome）でページを開き、ブラウザー開発ツール（_ctrl+shift+I_）を開きます。_<h1>_のデフォルトのフォントサイズは2emです。 [スタイル]タブで、[本文から継承]であることがわかります。このシナリオの開発ツールを使用していると、ボックスモデル図で、_<h1>_マージンが上下のマージンで21.440pxであることがわかります。 _<h1>_のCSSデフォルトを見ると、_margin-block-start: 0.67em;_と_margin-block-end: 0.67em;_が表示されます。サイズ変更は親要素のフォントサイズに相対的であるため、0.67emは_<h1>_フォントサイズは_<body>_のフォントサイズではありません。これは少し計算して確認できます。0.67emx 32px = 21.440px。これは_<h1>_のマージンのサイズです。ボックスモデル図。詳細については、試してみてください http://www.123webconnect.com/convert-px-em.php

0
Dwayne