CSSでmargin、paddingを使用し子要素を親要素内に収めたいです。

前提・実現したいこと

CSSを使って子要素を親要素の中に収めたいです。

発生している問題・エラーメッセージ

画像のようにボックス内に収まっていないので修正したいです。HTMLはfloatを使用しての記述です。

HTML
1ソースコード
2
3```HTML
4<!DOCTYPE html>
5<html lang="ja">
6  <head>
7    <meta charset="utf-8">
8    <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
9    <link rel="stylesheet" type="text/css" href="css/responsive.css">
10    <title>レイアウト</title>
11  </head>
12  <body>
13    <header>
14      <div class="header1">ヘッダー</div>
15    </header>
16    <main>
17      <div id="menu">
18        <div class="menu1">メニュー</div>
19      </div>
20      <div id="iti">
21        <div class="iti1">
22          <div class="itiiti itilp"></div>
23          <div class="itini itilp"></div>
24        </div>
25        <div class="iti2">
26          <div class="itisan itilp"></div>
27          <div class="itiyon itilp"></div>
28        </div>
29      </div>
30      <div id="ni">
31        <div class="niiti"></div>
32        <div class="nini"></div>
33        <div class="nisan"></div>
34      </div>
35      <div id="san">
36        <div class="saniti san1"></div>
37        <div class="sanni san1"></div>
38      </div>
39      <div id="yon">
40        <div class="yoniti"></div>
41        <div class="yonni"></div>
42        <div class="yonsan"></div>
43        <div class="yonyon"></div>
44        <div class="yongo"></div>
45        <div class="yonroku"></div>
46      </div>
47    </main>
48    <footer>
49      <div class="foot">フッター</div>
50    </footer>
51  </body>
52</html>
53```CSS
54

@charset "utf-8";

body {
width: 1200px;
border: solid 1px #000;
}

header {
width: 1100px;
border: solid 1px #000;
height: 70px;
text-align: center;
margin: 10px 50px;
}

.header1 {
text-align: left;
}

#menu {
width: 1100px;
text-align: center;
height: 50px;
border: solid 1px #000;
text-align: center;
margin: 10px 50px;
}

.menu1 {
text-align: left;
}

#iti {
width: 1100px;
text-align: center;
height: 100px;
border: solid 1px #000;
text-align: center;
margin: 10px 50px;
}
.itiiti {
border: solid 1px #000;
float: left;
width: 200px;
height: 80px;
margin: 10px 34px 10px 50px;
}
.itini {
border: solid 1px #000;
float: left;
width: 200px;
height: 80px;
margin: 10px 34px 10px 30px;
}
.itisan {
border: solid 1px #000;
float: left;
width: 200px;
height: 80px;
margin: 10px 34px 10px 30px;
}
.itiyon {
border: solid 1px #000;
float: left;
width: 200px;
height: 80px;
margin: 10px 50px 10px 30px;
}

#ni {
width: 1100px;
text-align: center;
height: 100px;
border: solid 1px #000;
text-align: center;
margin: 10px 50px;
}
.niiti {
border: solid 1px #000;
float: left;
width: 300px;
height: 80px;
margin: 10px 32px 10px 50px;
}
.nini {
border: solid 1px #000;
float: left;
width: 300px;
height: 80px;
margin: 10px 16px 10px 15px;
}
.nisan {
border: solid 1px #000;
float: left;
width: 300px;
height: 80px;
margin: 10px 50px 10px 31px;
}

#san {
width: 1100px;
text-align: center;
height: 120px;
border: solid 1px #000;
text-align: center;
margin: 10px 50px;
}
.saniti {
border: solid 1px #000;
float: left;
width: 470px;
height: 100px;
margin: 10px 28px 10px 50px;
}
.sanni {
border: solid 1px #000;
float: left;
width: 470px;
height: 100px;
margin: 10px 50px 10px 28px;
}

#yon {
width: 1100px;
text-align: center;
height: 100px;
border: solid 1px #000;
text-align: center;
margin: 10px 50px;
}
.yoniti {
width: 120px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px 28px 10px 50px;
}
.yonni {
width: 120px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px 29px 10px 25px;
}
.yonsan {
width: 120px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px 29px 10px 25px;
}
.yonyon {
width: 120px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px 28px 10px 25px;
}
.yongo {
width: 120px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px 29px 10px 25px;
}
.yonroku {
width: 120px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px 50px 10px 25px;
}

footer {
border: solid 1px #000;
height: 70px;
text-align: center;
margin: 10px 50px;
}
.foot {
text-align: left;
}

@media screen and (max-width: 999px) {
body {
width: auto;
height: 1100px;
}
header {
width: auto;
}
#menu {
width: auto;
}
#iti {
width: auto;
height: 194px;
}
.itiiti {
border: solid 1px #000;
float: left;
width: 30%;
height: 80px;
margin: 10px 34px 10px 50px;
}
.itini {
border: solid 1px #000;
float: right;
width: 30%;
height: 80px;
margin: 10px 50px 10px 30px;
}
.itisan {
border: solid 1px #000;
float: left;
width: 30%;
height: 80px;
margin: 0px 34px 10px 50px;
clear: both;
}
.itiyon {
border: solid 1px #000;
float: right;
width: 30%;
height: 80px;
margin: 0px 50px 10px 30px;
}

#ni {
width: auto;
height: 194px;
}
.niiti {
border: solid 1px #000;
float: left;
width: 300px;
height: 80px;
margin: 10px 32px 10px 50px;
}
.nini {
border: solid 1px #000;
float: right;
width: 300px;
height: 80px;
margin: 10px 50px 10px 15px;
}
.nisan {
border: solid 1px #000;
clear: both;
float: left;
width: 300px;
height: 80px;
margin: 0px 50px 10px 50px;
}
#san {
width: auto;
height: 234px;
}
.saniti {
border: solid 1px #000;
width: 758px;
height: 100px;
float: left;
margin: 10px 50px 10px 50px;
}
.sanni {
border: solid 1px #000;
float: left;
clear: both;
width: 758px;
height: 100px;
margin: 0px 50px 10px 50px;
}

#yon {
width: auto;
height: 194px;
}
.yoniti {
width: 200px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px 77px 10px 50px;
}
.yonni {
width: 200px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px 0px;
}
.yonsan {
width: 200px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: right;
margin: 10px 50px 10px 77px;
}
.yonyon {
width: 200px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
clear: both;
margin: 0px 77px 10px 50px;
}
.yongo {
width: 200px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 0px 0px 10px 0px;
}
.yonroku {
width: 200px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: right;
margin: 0px 50px 10px 77px;
}
}

@media screen and (max-width: 570px) {
body {
width: auto;
height: 1600px;
}
#menu {
width: auto;
}
#iti {
width: auto;
height: 204px;
}
.itiiti {
border: solid 1px #000;
float: left;
width: 150px;
height: 80px;
margin: 10px 34px 10px 10px;
}
.itini {
border: solid 1px #000;
float: right;
width: 150px;
height: 80px;
margin: 10px 10px 10px 30px;
}
.itisan {
border: solid 1px #000;
float: left;
width: 150px;
height: 80px;
margin: 0px 34px 10px 10px;
clear: both;
}
.itiyon {
border: solid 1px #000;
float: right;
width: 150px;
height: 80px;
margin: 0px 10px 10px 30px;
}

#ni {
width: auto;
height: 204px;
}
.niiti {
border: solid 1px #000;
float: left;
width: 150px;
height: 80px;
margin: 10px 32px 10px 10px;
}
.nini {
border: solid 1px #000;
float: right;
width: 150px;
height: 80px;
margin: 10px 10px 10px 15px;
}
.nisan {
border: solid 1px #000;
clear: both;
float: left;
width: 150px;
height: 80px;
margin: 0px 10px 10px 10px;
}
#san {
width: auto;
height: 244px;
}
.saniti {
border: solid 1px #000;
width: 417px;
height: 100px;
margin: 10px 10px 10px 10px;
}
.sanni {
border: solid 1px #000;
width: 417px;
height: 100px;
margin: 10px 10px 10px 10px;
}
#yon {
width: auto;
height: 612px;
}
.yoniti {
width: 417px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px;
}
.yonni {
width: 417px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px;
}
.yonsan {
width: 417px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px;
}
.yonyon {
width: 417px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
clear: both;
margin: 10px;
}
.yongo {
width: 417px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px;
}
.yonroku {
width: 417px;
height: 80px;
border: solid 1px #000;
margin: 10px;
float: left;
margin: 10px;
}

}

### 試したこと

親要素にpaddingを10pxずつ追加する。margin幅を変更してみる。
調べたが、width100%の場合や、overflowを使用した回答しか見つけられなかった。

### 補足情報（FW/ツールのバージョンなど）

margin,paddingを使用して修正したいです。ご回答よろしくお願い致します。

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

回答1件

ベストアンサー

こちらが参考になると思います。

HTML - marginが親要素からはみ出てしまう。余白を作りたい。｜teratail

投稿2021/09/28 12:38

itagagaki

総合スコア8402

mitasen

2021/09/28 13:05

ご回答ありがとうございます。リンクを拝見させていただきましたが私の理解が足らず悩んでいます。下記のコードの対処法をご教授いただけると幸いです。 #san { width: auto; height: 244px; } .saniti { border: solid 1px #000; width: 417px; height: 100px; margin: 10px 10px 10px 10px; } .sanni { border: solid 1px #000; width: 417px; height: 100px; margin: 10px 10px 10px 10px; }