Skip to main content
本文に 7 文字追加
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

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

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

以下コードです。

HTML
***

BoxModelDemo 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. CSS div { width: 200px; height: 300px; } #one { background-color: #fec5bb; border-width: 5px; border-color: black; border-style: solid; }***[![画像の説明をここに入力][1]][1]
<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;
}

画像の説明をここに入力

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

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

以下コードです。

HTML
***

BoxModelDemo 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. CSS div { width: 200px; height: 300px; } #one { background-color: #fec5bb; border-width: 5px; border-color: black; border-style: solid; }***[![画像の説明をここに入力][1]][1]

初歩的な質問で恐縮ですが、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;
}

画像の説明をここに入力

ソース リンク

htmlのdivとtextのサイズについての質問です

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

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

以下コードです。

HTML
***

BoxModelDemo 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. CSS div { width: 200px; height: 300px; } #one { background-color: #fec5bb; border-width: 5px; border-color: black; border-style: solid; }***[![画像の説明をここに入力][1]][1]