CSSの長さの単位~“px”

“px”について

“px(ピクセル)”は“1/96in”の長さと定義される絶対単位です。

物理的な長さの単位に依存するデバイスでは“1px”は物理的な1/96(≒0.01)インチと同じ長さです。

参照ピクセルに依存するデバイスでは“1px”は1参照ピクセルです。

“1px”の長さは必ずしもディスプレイの画素1個分の長さとは一致しません。区別するためにディスプレイの画素の個数を数える長さは“デバイスピクセル”、CSSの“1px”の長さは“CSSピクセル”と呼ばれます。

使用例

div.sample-box { font-size: 16px;}

p.font-20px { font-size: 20px;}
div.boxw-20px { width: 20px;}


文字の大きさ“16px”の親要素
<div class="sample-box">

文字の大きさ
<p class="font-20px">

猫は、上のかぎり黒くて、ことはみな白き。

</p>

長さ
<div class="boxw-20px">

width: 20px;

</div>

</div>

文字の大きさ“16px”の親要素

文字の大きさ

猫は、上のかぎり黒くて、ことはみな白き。

長さ

width:20px;