CSSで謎の隙間ができる

実現したいこと

下のボトム（紫と水色部分）を上のミドル（ピンク部分）と横幅を揃えたい。

発生している問題・分からないこと

下のボトム（紫と水色部分）が上のミドル（ピンク部分）と横幅が違う。一回り小さくなって白い余白ができてしまう。

エラーメッセージ

error
1エラーは出ていません。

該当のソースコード

CSS
1#top {
2    width: 800px;
3    background-color: #dcc9f4;
4    padding: 20px;
5    margin: 20px auto; 
6    text-align: center; 
7}
8
9.top-child {
10    width: 20%; 
11    background-color: #ffd9df;
12    display: inline-block; 
13    margin: 0 10px; 
14}
15
16#middle {
17    width: 800px;
18    height: 800px;
19    background-color: #ffd9df;
20    padding: 20px; 
21    margin: 20px auto; 
22    position: relative; 
23}
24
25#middle-child01, #middle-child02, #middle-child03 {
26    width: 200px;
27    height: 200px;
28    background-color: #87ceeb;
29    position: absolute; 
30}
31
32#middle-child01 {
33    top: 100px;
34    left: 100px;
35}
36
37#middle-child02 {
38    top: 300px;
39    left: 300px;
40}
41
42#middle-child03 {
43    top: 500px;
44    left: 500px;
45}
46
47#bottom {
48    width: 800px;
49    height: 300px;
50    background-color: #87ceeb; 
51    position: absolute;
52    left: 50%;
53    transform: translate(-50%);
54    }
55
56#bottom-child01, #bottom-child02, #bottom-child03 {
57    width: 400px;
58    height: 100px;
59    background-color: #e5dcf0;
60    position: relative;
61}
62#bottom-child02 {
63    left: 200px;
64}
65
66#bottom-child03 {
67    left: 400px;
68}
69

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="このページは18章の課題です。, initial-scale=1.0">
6    <title>18章課題</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div id="top">
11        <p class="top-child">sample</p>
12        <p class="top-child">sample</p>
13        <p class="top-child">sample</p>
14    </div>
15    <div id="middle">
16        <div id="middle-child01">
17        
18        </div>
19        <div id="middle-child02">
20        
21        </div>
22        <div id="middle-child03">
23        
24        </div>
25    </div>
26    <div id="bottom">
27        <div id="bottom-child01">
28        
29        </div>
30        <div id="bottom-child02">
31        
32        </div>
33        <div id="bottom-child03">
34        
35        </div>
36    </div>
37</body>
38</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

CHATGPTで検索しましたが解決しませんでした。

補足

特になし

行動規範の内容に同意します

回答3件

下記を追加したらどうですか。

css
1* {
2  box-sizing: border-box;
3}

#top, #middle と #bottom に幅の差がでる原因は、前者には padding: 20px; で設定されており、後者にはpaddingが設定されていないことです。
どれもwidth: 800px;が設定されていますが、デフォルトではコンテンツ領域が800pxになり、それにpaddingや境界幅を加算したものが要素全体の幅になります。
つまり前者の幅は840px, 後者の幅はpaddingがないので幅は800pxになります。

両者とも幅800pxに揃えたいのなら、前者の幅をpadding分を引いたwidth: 760px;と設定すればいいのですが、これって面倒ですよね。

box-sizing: border-box;を設定すると、widthはpaddingや境界幅も含めて計算されます。
つまりwidth: 800px;と設定すればpaddingの有無に関係なく要素幅は800pxになります。

box-sizing - CSS: カスケーディングスタイルシート | MDN

投稿2024/08/05 17:06

hatena19

総合スコア34033

一度 F12 から確認してみると次の様に見ることができます。

playground

div#middle

div#bottom

となっており、 div#middle の方は width は一致しているが、 padding によって伸びていることが見受けられます。

その為、 width に padding と border を含める為に box-sizing を default の content-box から padding や border も含む border-box に変更することで

playground

合わせることができます。

投稿2024/08/06 01:30

juner

総合スコア290

こうですか？

css
1#middle {
2  width: 800px;
3  height: 800px;
4  background-color: #ffd9df;
5  padding: 20px;
6  margin: 20px auto 0; /* 変更 */
7  position: relative;
8}
9
10/* ... */
11
12#bottom {
13  width: 800px;
14  height: 300px;
15  background-color: #87ceeb;
16  position: absolute;
17  left: 50%;
18  transform: translate(-50%);
19  padding: 20px; /* 追加 */
20}