<display:block>に対して<p>を挿入したが左上に余白が出てしまう。

display:blockでレイアウトを組みましたが、
class指定して<p>を挿入しようとした所、左上に余白が出てしまいました。
この余白をなくす方法を教えて下さい。
宜しくお願いします。

1．CSSソース

#box {
	display: block;
	position: relative;
	width: 1200px;
	height: 750px;
	margin: auto;
}

#menu {
	display: block;
    background-color: #ffffff;
	position: absolute;
	width: 310px;
	height: 500px;
	top: 30px; right: 20px;
}

#main {
	display: block;
	background-color: #ffffff;
	position: absolute;
	width: 790px;
	height: 690px;
    top: 30px; left: 20px;
}

2．HTMLソース

	<div id="menu"><!-- メニュー開始 -->
	
	<p class="menu">MENU</p>
	
	</div><!-- メニュー終了 -->

3.CSS <p>class指定

p.menu { display: block;
	     background-color: #555555;
	     width: 200px;
	     height: 100px; 
	     line-height: 4ex; 
         font-size: 1em;
}

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

回答1件

ベストアンサー

ユーザーエージェントスタイルシートというブラウザが各要素に設定しているスタイルが原因です。この問題を解決するには、該当要素(今回はp要素)に設定されているスタイルを上書きする必要があります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        #box {
8            display: block;
9            position: relative;
10            width: 1200px;
11            height: 750px;
12            margin: auto;
13        }
14
15        #menu {
16            display: block;
17            background-color: #faa;
18            position: absolute;
19            width: 310px;
20            height: 500px;
21            top: 30px;
22            right: 20px;
23        }
24
25        #main {
26            display: block;
27            background-color: #faf;
28            position: absolute;
29            width: 790px;
30            height: 690px;
31            top: 30px;
32            left: 20px;
33        }
34
35        p.menu {
36            display: block;
37            background-color: #555555;
38            width: 200px;
39            height: 100px;
40            line-height: 4ex;
41            font-size: 1em;
42            margin: 0; /* 追記 */
43        }
44    </style>
45</head>
46<body>
47<div id="main"></div>
48<div id="menu"><!-- メニュー開始 -->
49
50    <p class="menu">MENU</p>
51
52</div><!-- メニュー終了 -->
53</body>
54</html>