レイアウトについて

こんばんは。見てくださってありがとうございます。

ぜんぜん簡単なことなのかもしれませんが、
下記のhtmlとcssでなぜnavがwrapperの
下のほうに配置されてしまうのか、
sectionの周りにできてしまう余白はなんなのか
がわからないです。

初歩的な質問で申し訳ございません。
よろしくお願いいたします。

html

<!doctype html> <html> <head lang="ja"> <meta charset="utf-8"> <title>test</title> <meta name="description" content=""> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <header> </header> <div id="wrapper"> <nav> <ul> <li>1</li><li>2</li><li>3</li> </ul> </nav> <section> </section> </div> <footer> </footer> </body> </html> ------------------------------------------

css

*{
margin:0;
padding:0;
}
header{
width:100%;
height:300px;
background:#000;
}
div#wrapper{
width:960px;
margin:0 auto;
}
nav{
display:inline-block;
width:500px;
background:#00f;
}
nav ul li{
color:#fff;
}
section{
display:inline-block;
width:450px;
height:100px;
background:#0f0;
}
footer{
width:100%;
height:100px;
background:#aaa;
}

退会済みユーザー

2015/09/08 16:12

そもそもですが…あなたはどのようにレイアウトしたいのかがわかりません。どうしたいのかがわからずに、なぜかを問われても回答の仕様がありません。

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

回答3件

html
1<body>
2	<header>
3	</header>
4	<div id="wrapper">
5		<nav>
6			<ul>
7				<li>1</li><!-- -->
8				<li>2</li><!-- -->
9				<li>3</li><!-- -->
10			</ul>
11		</nav>
12		<section>
13		</section>
14	</div>
15	<footer>
16	</footer>
17</body>

わかりやすくすればこうですね。
親子関係がはっきりします。
このスペースみたいなのはキーボードのTABと書かれたボタンでうてます。
インデントって言います。

なぜnavがwrapperの下のほうに配置されてしまうのか、

<nav>をid="wrapper"の次に書いているから（設定しているから）です。 htmlってどこに何を書くかを決めるためのものなんですよね。（悪い言い方ですけど） id="wrapper"はなくても大丈夫ですね。

sectionの周りにできてしまう余白はなんなのか

<section><article><p><img>などタグには空白が設定されています。 cssでは padding 内枠 margin 外枠です。これの値を0にすれば空白は消えます。逆に値を入れればそのぶん空白ができます。 ```css section { padding: 0; margin: 0; } ``` ```css section { padding: 50px; margin: 50px; } ```

投稿2015/09/11 10:46

makoto-n

総合スコア436

ベストアンサー

css
1div#wrapper{
2    width:960px;
3    margin:0 auto;
4    display: table;
5}
6nav{
7    display:table-cell;
8    width:500px;
9    background:#00f;
10    vertical-align: top;
11}
12section{
13    display:table-cell;
14    width:450px;
15    height:100px;
16    background:#0f0;
17}