0

初歩的な質問で恐縮ですが、div要素に囲われたtextなのですが、検証ツールで確認すると、サイズがdivは200x300なのに対して、textは381.36x536になりました。しかし見た目ではtextがdivの中に囲われています。
サイズがtextの方が大きいのにdivからはみ出さないのはなぜですか?

お手数をおかけしますが回答いただけますと幸いです。

以下コードです。

HTML

<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>BoxModelDemo</title>
 <link rel="stylesheet" href="box.css">
 </head>
 <body>
 <div id="one">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur distinctio necessitatibus possimus non aspernatur. Voluptas voluptatem magnam minima, ut sequi aspernatur! Nulla ullam suscipit, illum consequatur facere culpa. Eius, delectus.</div>
</html>

CSS

div {
 width: 200px;
 height: 300px;
}
 
#one {
 background-color: #fec5bb;
 border-width: 5px;
 border-color: black;
 border-style: solid;
}

画像の説明をここに入力

4
  • 「textのサイズ」というのはどうやって確認しましたか?
    – int32_t
    Commented 9月21日 2:06
  • あ、ChromeのDevToolsのElementsパネルで該当テキストを選択、ですね。確認しました。
    – int32_t
    Commented 9月21日 2:13
  • @int32_t さん> 興味深かったので問題を再現しようとしたのですが、手元のChromeではdivが200x300px(スクショ)、テキストが186x288px(スクショ)となりました。何か他に、再現に必要なステップなどはありましたか?
    – supa
    Commented 9月21日 21:47
  • Retina ディスプレイの mac を使うとか、ブラウザのページズームを200%にするとかで再現するかと思います。
    – int32_t
    Commented 9月22日 1:41

1 件の回答 1

0

Google Chromeのバグなんじゃないかと思います。
CSSピクセルと物理ピクセルが一致しない環境で、物理ピクセルでのサイズが表示されているようです。Firefoxだと問題ありません。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。