余白の消し方について知りたい

右と下の余白を無くしたいです。
やり方よろしくお願いします。
コードは以下の通りです。

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="kadai-css.css">
    </head>
    <body>
        <header>
        ここはヘッダーです。    
        </header>
        <div id="wrapper">
            <div id="main">
                <h1>HTML/CSSでWebページ作成</h1>
            <section>
                <h2>Webサイトの仕組み</h2>
                <p>Webサイトとは、Webページをひとまとまりにして公開したWebページの集まりのことです。</p>
                <h3>Webブラウザとは</h3>
                <p>Webブラウザの説明が入ります。</p>
            
                <h3>Webページの構成</h3>
                <p>Webページの構成の説明が入ります。</p>
            
                <h3>Webページの表示</h3>
                <p>Webページの表示の説明が入ります。</p>
            
            </section>
            
            
            
            
            </div>
            <nav id="menu">
            <ul>
                <li>Webサイトの仕組み</li>
                <li>HTMLとCSSの概要</li>
                <li>HTMLの基本</li>
                <li>head要素内の記述</li>
                <li> body要素内の記述</li>
                <li>id属性とclass属性の設定</li>
                <li>HTMLチュートリアル</li>
            </ul>
            </nav>
        
        </div>
        
        <footer>ここはフッターです。</footer>
    </body>
</html>
コード



header {
    width: 1000px;
    height: 50px;
    background-color: #ffcccc;
}

#wrapper {
    width: 100%;
    
    overflow:hidden;
    
}

#main {
    float: left;
    width: 700px;
    height: 450px;
    background-color: #ccffcc;
    
}

#menu {
    float: left;
    width: 300px;
    height: 450px;
    background-color: #ccccff;
   
}

footer {
    width: 1000px;
    height: 50px;
    background-color: #ffccff;
}
コード
```、

gogoweb_ikeda

2020/10/16 01:59

現在横幅も高さも指定されており、横幅1000px 高さ550pxになると思われます。この状態で余白をなくしたいというのはどのような挙動を希望しているのでしょうか？（main部分を自動で伸縮したい、コンテンツ全体を中央に配置したい等）

steisam

2020/10/16 03:35

header, main, menuの横幅は固定値でコンテンツ全体に満遍なく配置したいと考えてます。

gogoweb_ikeda

2020/10/16 04:07

そうなるとブラウザのサイズを1000*550px固定にすることになってしまいますが・・・

sousuke

2020/10/16 08:03

質問者さんは横幅などを固定したいのはいいですが「ブラウザのサイズがそれ以上だった場合どうしたいのか」を記述するべきだと思います。

steisam

2020/10/16 09:44

ブラウザのウィンドウを縮小した場合も、#mainが700px、#menuが300pxで表示されるようにしたいです。このことから、header、footerの横幅は、1000pxとなります。よろしくお願いします。

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

回答1件

ベストアンサー

bodyのブラウザデフォルトの余白です。下記のCSSを追加すればいいでしょう。

css
1body {
2  margin: 0;
3}

右と下の余白を無くしたいです。

この部分を見落としてました。上記は左と上の余白の消し方です。

現状、header、footer、#maun、#menu の幅をpxの固定値で設定してますので、それを%の相対値で設定すればどうでしょうか。

高さに関しては、横並びをfloatでするのではなくFlexboxでするようにして、#mainの高さをvhを基準とした計算値(calcを利用)にすればどうでしょうか。

css
1body {
2  margin: 0;
3}
4
5header {
6    width:100%;
7    height: 50px;
8    background-color: #ffcccc;
9}
10
11#wrapper {
12    width: 100%;
13    overflow:hidden;
14    display: flex;
15}
16
17#main {
18    width: 70%;
19    background-color: #ccffcc;
20    min-height: calc(100vh - 100px); /* 画面高さ - header,footerの高さ */
21}
22
23#menu {
24    width: 30%;
25    background-color: #ccccff;
26}
27
28footer {
29    width: 100%;
30    height: 50px;
31    background-color: #ffccff;
32}