CSSマージン単位とは何ですか?

CSS マージン単位には、px、%、em、rem、vw と vh、vmin と vmax、ex と ch、pt と pc などが含まれます。詳細な紹介: 1. px、固定長の単位; 2. %、マージンの単位は親要素の幅を基準にして計算されます; 3. em、マージンの単位は要素のフォント サイズを基準にして計算されます; 4 . rem、ルート要素のフォント サイズに相対的なマージンを計算するための単位、5. vw および vh、ビューポートの幅およびビューポートの高さに相対的な単位、6. vmin および vmax など。

# このチュートリアルのオペレーティング システム: Windows 10 システム、Dell G3 コンピューター。

CSS マージン ユニットには次のタイプがあります:

ピクセル (px): ピクセルは、最も一般的に使用されるマージン ユニットの 1 つで、ポイントを表す固定長の単位です。 CSS では、ピクセル値を使用して要素のマージンを設定できます (例: margin: 10px)。

パーセント (%): パーセントは、親要素の幅に対するマージンの計算に使用される単位です。たとえば、親要素の幅が 200px でマージンを 10% に設定した場合、マージンは 20px になります。パーセンテージ単位を使用して水平および垂直マージンを設定できます (例: margin-top: 10%)。

em: em は、要素のフォント サイズに対するマージンの計算に使用される単位です。たとえば、要素のフォント サイズが 16 ピクセルでマージンが 2em に設定されている場合、マージンは 32 ピクセルになります。 em 単位は、水平方向と垂直方向のマージンを設定するために使用することもできます (例: margin-left: 1.5em)。

rem: rem は、ルート要素のフォント サイズに対するマージンの計算に使用される単位です。ルート要素は通常、HTML 要素です。 em ユニットとは異なり、rem ユニットの値はその親要素の影響を受けません。たとえば、ルート要素のフォント サイズが 16px、マージンが 2rem に設定されている場合、マージンは 32px になります。

vw と vh: vw と vh は、ビューポートの幅とビューポートの高さを基準とした単位です。ビューポートは、ブラウザ ウィンドウまたはデバイス画面の表示領域です。 vw はビューポートの幅のパーセンテージを表し、vh はビューポートの高さのパーセンテージを表します。たとえば、ビューポートの幅が 1000px でマージンが 10vw に設定されている場合、マージンは 100px になります。

vmin と vmax: vmin と vmax は、ビューポートの幅とビューポートの高さの小さい値または大きい値に対する相対的なパーセンテージです。 vmin はビューポート内の小さい方のサイズに基づいて計算され、vmax はビューポート内の大きい方のサイズに基づいて計算されます。たとえば、ビューポートの幅が 1000 ピクセル、ビューポートの高さが 800 ピクセル、マージンが 10vmin に設定されている場合、マージンは 80 ピクセルになります。

ex と ch: ex と ch は、フォントの高さ "x" と文字幅 "0" を基準にしてマージンが計算される単位です。これらの単位は通常、特定のフォントに関連付けられた余白を設定するために使用されます。たとえば、フォントの「x」の高さが 10 ピクセルでマージンが 2ex に設定されている場合、マージンは 20 ピクセルになります。

pt と pc: pt と pc は印刷単位で、印刷時にマージンを設定するために使用されます。 pt は 1/72 インチを意味し、pc は 12 ポイントを意味します (1 ポイントは 1/72 インチに相当します)。これらの単位は Web 開発ではほとんど使用されず、印刷および出版の世界でよく見られます。

上記は CSS における一般的なマージン単位です。特定のニーズやデザイン要件に応じて、適切な単位を選択して要素の余白を設定すると、ページ レイアウトをより柔軟で制御しやすくなります。

以上がCSSマージン単位とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。