【html&css】width（横幅）とheight（高さ）の指定とボックスモデル

<div class="simple-box"></div>

.simple-box {
  width: 200px;  /* 横幅を200pxにする */
  height: 100px; /* 高さを100pxにする */
  background-color: #2589d0; /* 分かりやすいように青色を塗る */
}

<div class="container">
  <div class="box content-box">
    <div class="inner">content-box<br>(260pxになる)</div>
  </div>

  <div class="box border-box">
    <div class="inner">border-box<br>(200pxのまま)</div>
  </div>
</div>

.container {
  display: flex;
  justify-content: center;
  gap: 50px;
  padding: 20px;
  background-color: #f0f0f0;
}

/* 共通の基本設定 */
.box {
  width: 200px;        /* 横幅 200px */
  height: 100px;       /* 高さ 100px */
  padding: 20px;       /* 内側の余白（緑色の部分） */
  border: 10px solid #777; /* 枠線（黒色の部分） */
  margin: 20px;        /* 外側の余白 */
  background-color: #2589d0; /* Padding部分の色 */
}

/* 中身のテキストエリア（Content部分） */
.inner {
  background-color: #fff;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}

/* 【重要】ここが違いの決め手！ */
.content-box {
  box-sizing: content-box; /* デフォルトの設定 */
}

.border-box {
  box-sizing: border-box; /* 枠線も含めて200pxにする設定 */
}

<div class="resize-container">
  <p class="note">▼ 右下をドラッグして箱の幅を伸び縮みさせてみよう！</p>

  <div class="box box-px">
    <strong>width: 300px;</strong><br>
    親の幅が変わっても、ずっと300pxのままです。
  </div>

  <div class="box box-percent">
    <strong>width: 50%;</strong><br>
    常に、親の幅の「ちょうど半分」のサイズになります。
  </div>

  <div class="box box-auto">
    <strong>width: auto;</strong><br>
    親の幅に合わせて、余白（marginなど）を計算してピッタリ収まります。
  </div>
</div>

.resize-container {
  width: 100%;
  max-width: 800px;
  border: 3px dashed #888;
  padding: 20px;
  background-color: #f9f9f9;
  resize: horizontal;
  overflow: hidden; 
}

.note {
  font-size: 14px;
  color: #d32f2f;
  font-weight: bold;
  margin-top: 0;
}

/* 3つの箱の共通設定 */
.box {
  margin-bottom: 20px;
  padding: 15px;
  color: #fff;
  border-radius: 5px;
}

/* ① pxの箱（固定） */
.box-px {
  width: 300px;
  background-color: #2196F3;
  box-sizing: border-box;
}

/* ② %の箱（相対） */
.box-percent {
  width: 50%;
  background-color: #4CAF50;
  box-sizing: border-box;
}

/* ③ autoの箱（自動） */
.box-auto {
  width: auto;
  margin-right: 60px;
  background-color: #FF9800;
  box-sizing: border-box;
}

<div class="smartphone-screen">
  <p class="title">親の箱（スマホ画面：横幅320px）</p>

  <div class="box-px">
    <strong>【失敗】width: 400px;</strong><br>
    画面サイズを無視して400pxの幅を確保しようとするため、右に突き抜けてしまいます！
  </div>
</div>

/* スマホ画面に見立てた親要素（横幅320px） */
.smartphone-screen {
  width: 320px;
  background-color: #e0e0e0;
  border: 4px solid #777;
  padding-bottom: 20px;
  margin: 0 auto;
}

.title {
  text-align: center;
  font-weight: bold;
}

/* 失敗する箱（横幅400px） */
.box-px {
  width: 400px; /* 親の320pxより大きい！ */
  background-color: #E53935;
  color: white;
  padding: 10px;
}

<div class="smartphone-screen">
  <p class="title">親の箱（スマホ画面：横幅320px）</p>

  <div class="box-100">
    <strong>【失敗】width: 100%; + margin</strong><br>
    100%（320px）を確保した上で、さらに余白が足されるのではみ出します。
  </div>

  <div class="box-auto">
    <strong>【大正解】width: auto; + margin</strong><br>
    余白を引いた残りのスペースに、ピタッと自動で収まってくれます。
  </div>
</div>

/* スマホ画面に見立てた親要素（横幅320px） */
.smartphone-screen {
  width: 320px;
  background-color: #e0e0e0;
  border: 4px solid #777;
  padding-bottom: 20px;
  margin: 0 auto;
}

/* 失敗：100%の箱 */
.box-100 {
  width: 100%;       /* 親と同じ320pxになる */
  margin-left: 20px; /* さらに左に20pxの余白を追加 */
  background-color: #E53935;
  color: white;
  padding: 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

/* 成功：autoの箱 */
.box-auto {
  width: auto;       /* 自動計算モード */
  margin-left: 20px; /* 左に20pxの余白を追加 */
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  box-sizing: border-box;
}

<div class="basic-height">
  高さ150pxの箱です。
</div>

.basic-height {
  height: 150px; /* 高さを150pxに指定 */
  background-color: #2589d0;
  color: white;
  padding: 20px;
}

<div class="fixed-height-trap">
  <strong>【失敗例】height: 100px;</strong><br>
  文章が少ない時は問題ありませんが、このように文章量が増えてしまうと、箱の高さ（100px）を無視して文字だけが下に突き抜けてしまいます！これがオーバーフローと呼ばれるレイアウト崩れの原因です。
</div>

.fixed-height-trap {
  height: 100px; /* 高さを「絶対に100px」に固定！ */
  background-color: #E53935;
  color: white;
  padding: 10px;
  width: 300px;
}

<div class="height-container">
  <div class="box-auto">
    <strong>【正解1】height: auto;（初期値）</strong><br>
    文章量に合わせて、箱の高さが勝手に伸びてくれます！<br>
    はみ出す心配はゼロです。
  </div>

  <div class="box-min-height">
    <strong>【正解2】min-height: 150px;</strong><br>
    普段は150pxの高さを保ちますが、文章がそれ以上に増えた場合は、中身に合わせて柔軟に箱が伸びてくれます！これで安心です！
  </div>
</div>

/* パターンA：auto（指定しないのと同じ） */
.box-auto {
  height: auto; /* ブラウザが自動計算（デフォルト） */
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  margin-bottom: 20px;
}

/* パターンB：min-height（最小の高さ） */
.box-min-height {
  min-height: 150px; /* 最低でも150pxは確保する。それ以上は伸びる。 */
  background-color: #FF9800;
  color: white;
  padding: 10px;
}