html-marginで詰まってます　boundary-radius も反映されません

サンプルコード

html
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5  <meta http-equiv="Content-Style-Type" content="text/css">
6  <title></title>
7  <meta name="Generator" content="Cocoa HTML Writer">
8  <meta name="CocoaVersion" content="2022.3">
9
10  <style type="text/css">
11    h2{color:black; float:left;}
12    .top{margin:0 auto;  text-aline:center; margin-left:200px; margin-top:20px;}
13    .topicon{float:left;　border-radius: 5px; margin-left:20px; display:block;}
14    .main{clear:both; padding:300px, 100px; color:blue;}
15    p{display:block;}
16  </style>
17
18</head>
19<body>
20	<div class="top">
21		<h2>企業秘密</h2>
22		<img class="topicon" src="iconimg.jpeg" width="150px";}
23	</div>
24
25	<div class= "main">
26		<p>hello</p>
27	</div>
28</body>
29</html>

何ができなかったか

一段落目（ヘッダー）と二段落目（メイン）の間に300pxほどの空間を開けたいのですが、実行したところ下の写真の結果となり空間を開けれませんでした。displayをいじったりなどしても上手くいきませんでした。改善方法教えてください。
あと追加で、写真の端を丸くしたいのですがこれもできませんでした。理由教えて下さい。

写真

見ての通り全然空白作れてません：（
有識者さん教えてください。

補足情報

マックブックのテキストエディタでコードを書いていて、Google Chromeで実行してます

m.ts10806

2021/09/21 22:44

参考資料かなり古くないですか？ HTML４の記述になっています。

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

回答1件

ベストアンサー

構文チェックしてみてください。
結構指摘事項があります。

構文チェック機能のあるエディタを使われたほうが良いですし、インデントはつけましょう（コードフォーマット機能も必要です）

css
1    h2 {
2      color: black;
3      float: left;
4    }
5
6    .top {
7      margin: 0 auto;
8      text-aline: center;
9      margin-left: 200px;
10      margin-top: 20px;
11    }
12
13    .topicon {
14      float: left;
15      border-radius: 5px;
16      margin-left: 20px;
17      display: block;
18    }
19
20    .main {
21      clear: both;
22      padding: 300px, 100px;
23      color: blue;
24    }
25
26    p {
27      display: block;
28    }