<div class="heightauto">
  <p><span>高さ指定が「auto」の場合。(ブラウザ幅を変えても、背景色のある親要素から文字ははみ出しません)</span><br>
ここにはheight:auto「ぼくはもう、すっかり天の野原に来た。」ジョバンニは云いました。
「それにこの汽車石炭をたいていないねえ。」ジョバンニが左手をつき出して窓から前の方を見ながら云いました。
「アルコールか電気だろう。」カムパネルラが云いました。
 ごとごとごとごと、その小さなきれいな汽車は、そらのすすきの風にひるがえる中を、天の川の水や、三角点の青じろい微光びこうの中を、どこまでもどこまでもと、走って行くのでした。
</p>
  
</div>

<div class="height200px">
  <p><span>高さ指定のある場合。ここにはheight:20px(高さ20pxが設定されています。)<br></span>「ぼくはもう、すっかり天の野原に来た。」ジョバンニは云いました。
「それにこの汽車石炭をたいていないねえ。」ジョバンニが左手をつき出して窓から前の方を見ながら云いました。
「アルコールか電気だろう。」カムパネルラが云いました。
 ごとごとごとごと、その小さなきれいな汽車は、そらのすすきの風にひるがえる中を、天の川の水や、三角点の青じろい微光びこうの中を、どこまでもどこまでもと、走って行くのでした。
</p>

</div>

<p>宮沢賢治 銀河鉄道の夜より抜粋</p>

/*高さ指定のcss記述*/
.height200px{
  background:lightblue;
  height:200px; /*ブラウザ幅を狭くすると、文字が背景色から飛び出してしまいます。*/
}

.heightauto{
  background:turquoise;
  height:auto;
}


div{
  width:60%;
}

span{
  font-weight:bold;
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.