レイアウトにも大きな影響がある「横幅」と「高さ」について説明します。
以降の説明を読む前に、「ブロックとは？」の説明も読んでください。
説明の前に、次のように入力して、２つを見比べてください。
<div style="background-color: red;">指定なし</div>
<div style="width: 320px; background-color: pink;">320pxを指定したとき</div>
<div style="width: 80px; background-color: orange;">80pxを指定したとき</div>
次のように表示されます。
「指定なし」は、自由記入欄の左から右までぴったり赤い背景になり、「320px」の方は左からちょうど真ん中までがピンクの背景になります。 「80px」はさらにその１／４の横幅になっています。
"width: 320px;"で、ブロックの横幅が３２０ピクセルになるように指定されます。
80pxの方は８０ピクセルになります。
そして、内部のテキストはその中に納まるように表示されます。
自由記入欄の横幅は６４０ピクセルです。 前の入力例の「320pxを指定」の方の横幅は３２０ピクセルなので自由記入欄の横幅の半分です。 そのため、ピンクの背景も左から自由記入欄の中心のところまで背景色がピンクになっています。
width指定が無い場合、横幅は<div>～</div>の外側と同じになります。
前の入力例の場合、「指定なし」の外側は自由記入欄になるので、横幅も自由記入欄と同じ６４０ピクセルになっています。
横幅は％単位で指定することもできます。
<div style="width: 50%; background-color: pink;">50%を指定</div>
<div style="width: 25%; background-color: cyan;">25%を指定</div>
％を使った場合、<div>～</div>の外側の横幅を１００％としたときの、５０％や２５％の値を指定したことになります。
これは次のように入れ子構造にしてみるとわかりやすいでしょう。
<div style="width: 50%; background-color:pink;">50%を指定
<div style="width: 50%; background-color:cyan;">さらに50%を指定
<div style="width: 50%; background-color:orange;">さらにさらに50%を指定</div>
<div style="background-color:green;">指定なし</div>
</div>
</div>
次のように表示されます。
ピンクの背景のブロックは入れ子構造のもっとも外側なので、さらにその外側は自由記入欄です。 自由記入欄の横幅が６４０ピクセルなので、その５０％の３２０ピクセルがピンクのブロックの横幅になります。
水色（cyan）のブロックの外側はピンク（横幅３２０ピクセル）であり、その５０％の１６０ピクセルが水色のブロックの横幅になります。
オレンジのブロックはさらに５０％で横幅は８０ピクセルです。
緑色はwidth指定が無いので、外側（この場合は水色のブロック）と同じ１６０ピクセルの横幅になります。
次のように入力してください。
<div style="width: fit-content; background-color: orange;">内側にフィットした横幅</div>
次のように表示されます。
"width: fit-content;"と指定すると、ブロックの内側にあわせた横幅になります。
そのため、テキストとほとんど同じ幅に背景色が塗られています。
paddingや枠を使って次のような感じにすると、タイトルや見出しなどに良さそうな感じになります。
<div style="width: fit-content; margin: 0 auto; color: navy; border: 7px double; padding : .25em 1em;">キャラ説明</div>
<div style="width: fit-content; margin: 0 auto; color: red; border: 2px solid; border-radius: 2em; padding : .25em 1em;">エピソード１ 「旅立ち」</div>
※ 余白についての詳細は、まだ説明していません。「シンプルなレイアウト」で説明します。ここの説明はそちらを読んだ後で見た方が良いかもしれません。
次のように入力して、３つを見比べてみてください。
<div style="width: 320px; background-color: pink;">余白・枠なし</div>
<div style="width: 300px; padding: 10px; background-color: cyan;">余白を１０ピクセル</div>
<div style="width: 280px; padding: 10px; border: black 10px solid; background-color: orange;">余白と枠を１０ピクセル</div>
次のように表示されます。
３つのブロックの横幅がぴったり同じになっていることがわかるでしょう。
３つのブロックのwidth指定は、320px、300px、280pxです。２０ピクセルずつ減っています。
２つ目（余白を１０ピクセル）はpaddingで左右に１０ピクセル（合計２０ピクセル）の余白があるので、 「横幅３００＋余白２０＝３２０」が全体の横幅になっています。 その結果１つ目と２つ目の横幅がぴったり同じになります。
同様に、３つ目（余白と枠を１０ピクセル）はborderで左右に１０ピクセル（合計２０ピクセル）の枠線があります。余白も２０ピクセルあるので、「横幅２８０＋余白２０＋枠線２０＝３２０」が全体の横幅になっていて、横幅がぴったり同じになります。
入力例は割愛しますが、marginによる余白も同じように扱われます。 つまり、
このことは結構忘れがち/気がつきにくいところなので注意してください。 「段組みレイアウト」をするときに意図した位置にレイアウトできなくなる原因となります。 また、「width指定通りにならない…」と思い込んでしまって、ハマる原因となります。
外側サイズより内側のサイズが大きい場合、内側のタイプによって表示が変わります。
<div style="width: 160px; background-color:cyan;">横幅より長くなるテキストが内側にあるとき</div>
上のように入力したとき横幅は１６０ピクセルになります。 ところが内側のテキストが多いので、１行に表示すると１６０ピクセルを超えています。 その場合、テキストが途中で改行されます。
<div style="width: 320px; background-color: pink;">外側の領域<div style="width: 480px; background-color: cyan;">内側の領域</div>外側の領域</div>
上の入力例では、divが二重になっていて、外側は３２０ピクセル、内側が４８０ピクセルに指定されています。
このようにブロックが入れ子構造（二重構造）になっていて、外側のブロックより内側のブロックの横幅が大きい場合、はみ出してしまいます。
この例では、全体としては表示されているので大きな問題はありませんが、次の例のように自由記入欄をはみ出してしまうと問題があります。
<div style="width: 800px; background-color: cyan;">イベント期間中に自国以外の4国に遠征し、攻略成功すると、スタンプカードに設けられた各国1枠のスタンプ欄に「CLEAR」スタンプが押されます。</div>
次のように表示されます。
この例では１つのブロックしかありませんが、全てのブロックは自由記入欄の内側にあるので、「内側＝入力例のブロック、外側=自由記入欄」という関係があります。 そして、内側の横幅は８００ピクセルが指定されていますが、外側（自由記入欄）の横幅は６４０ピクセルなので、内側がはみ出していることになります。
自由記入欄の外へはみ出た部分は表示されません。 上の例でも、テキストの“「CLEAR」スタンプ”の周辺が表示されていません。
はみ出しの問題は、枠や余白で横幅が増える場合にも適用されます。
次の入力例は、自由記入欄からはみ出さない値として、width指定による横幅は６００にしています。
しかし、余白や枠線で増える分をうっかり考慮し忘れ、６４０を超えて自由記入欄からはみ出しています。
<div style="width: 600px; background-color: cyan; padding: 30px; border: 10px double;">自由記入欄の横幅が６４０ピクセルなので、それを超えないようにwidth：600pxを指定したけれど…。</div>
複雑なレイアウトを行っていると、この「うっかり６４０ピクセルを超える」をやってしまうこともあるので注意してください。
説明の前に、次のように入力して、２つを見比べてください。
<div style="width: 100px; background-color: red;">横幅のみ</div>
<div style="height: 100px; width: 100px; background-color: pink;">高さと横幅</div>
次のように表示されます。
"height: 100px;"で、ブロックの高さが１００ピクセルになるように指定されます。
横幅も１００ピクセルなので、背景色のピンク色が１００ピクセルの正方形になっています。
横幅（width）で説明したことのほとんどは高さ（height）でも適用されますが、次の２つの場合は異なります。
次のように入力してください。
<div style="height: 100px; width: 100px; background-color: red;"> <div style="background-color: pink;">％指定</div></div>
次のように表示されます。
上の例はブロックが入れ子になっていて、外側は高さと横幅に１００ピクセルを指定しています。内側は指定がありません。
widthの指定が無いとき、横幅は外側の幅と同じになります。 一方、heightの指定が無いとき、高さは外側の高さと一致しません。 指定が無いとき、高さと横幅では表示のされ方が変わります。
自由記入欄の横幅が６４０ピクセルに固定されているのに対し、高さは固定されていません。 そのため、％指定でも表示のされ方が変わります。 次のように入力してください。
<div style="height: 50%; width: 50%; background-color: cyan;">％指定</div>
<div style="height: 100px; width: 100px; background-color: red;"> <div style="height: 50%; width: 50%; background-color: pink;">％指定</div></div>
次のように表示されます。
％指定する場合はブロックの外側で値が決まっている必要があります。
水色の背景のブロックの外側は自由記入欄です。自由記入欄の横幅は６４０ピクセルなので、width: 50%;と指定すれば横幅は３２０ピクセルになります。
しかし自由記入欄の高さは固定値ではない（指定されていない）ので、height: 50%;としても、特定の高さにはなりません。指定がないときと同じになります。
ブロックが入れ子になっていて、外側のブロックで高さが指定されているなら、内側のブロックで％指定することができます。
外側（赤い背景）のサイズが100x100なので、内側（ピンク背景）のサイズは50x50になっています。