tableのmargin-topが反映されません

###前提・実現したいこと
![

tableの上の部分に空白が100px欲しいのですが、margin-topと書いても何も反映されません。
リロードすると、画面が一瞬切り替わるのですが、空白は増えません。
何が問題なのでしょうか？教えて頂けたらありがたいです。よろしくお願いします。

###該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title></title>
6    <link rel="stylesheet" type="text/css" href="style.css">
7
8</head>
9<body>
10    <div class="header">
11       
12    </div>
13
14    <div class="main" id="main">
15
16     <div class="whole-photo">
17         <div id="photo01" class="photoframe">
18
19         <p class="photo"><img src=""></p>
20
21         <p class="in"></p>
22
23     </div>
24
25
26         <div class="note">
27             <div class="letters">
28             <p></p>
29             <p></p>
30            </div>
31
32         </div>
33
34        
35            <table class="days">
36               <tr>
37                <td>1人</td>
38                <td>2人</td>
39                <td>３人</td>
40                <td>4人</td>
41                <td>5人</td>
42               <tr>
43
44                <td><img src="pic1.png"></td>
45                <td><img src="pic2.png"></td>
46                <td><img src="pic3.png"></td>
47                <td><img src="pic4.png"></td>
48                <td><img src="pic5.png"></td>
49
50               </tr>
51              </table>
52
53
54
55
56
57
58          <div class="push"></div>
59          </div>
60
61
62
63
64
65    <div class="footer" id="footer">
66</div>
67        
68</body>
69</html>

CSS
1
2body{
3    width: 100%;
4    margin: 0px;
5    padding: 0px;
6    background-color:white;
7   
8
9}
10
11
12
13
14
15
16.main{
17    width: 100%;
18    height: 1000px;
19    padding: 100px 0px;
20    margin: 0px;
21}
22
23
24.whole-photo{
25  margin-left:70px;
26  margin-top: 50px;
27  position:relative;
28}
29
30
31
32.photoframe {
33  position: relative;
34  display: inline;
35  float: left;
36  width: 340px;
37  height: 430px;
38  overflow: hidden;
39  margin: 0 10px 20px;
40  padding: 15px;
41  background: #ffffff;
42  border: 1px solid rgba(0, 0, 0, 0.3);
43  text-align: center;
44  -webkit-border-radius: 2px;
45  -moz-border-radius: 2px;
46  border-radius: 2px;
47  -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
48  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
49  box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
50  z-index: 1;
51}
52
53.photoframe .photo {
54  width: 340px;
55  height: 385px;
56  overflow: hidden;
57  margin: 0 0 10px;
58  padding: 0;
59  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
60  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
61  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
62}
63
64.photoframe img {
65  position: relative;
66  display: block;
67  margin: 0;
68  padding: 0;
69  z-index: -1;
70  width:339px;
71  height:359px;
72}
73
74
75.note{
76    width:390px;
77    height:460px;
78    float:right;
79    margin-right:160px;
80    position: relative;
81    background-color: #ffffe7;
82    background-image:
83    linear-gradient(rgba(241,207,164,0.5) .1em, transparent .1em);
84    background-size: 100% 1.5em;
85    line-height:1.5em;}
86
87
88.in{
89  padding-bottom: 20px;
90  font-size: 28px;
91  margin-top: 5px;
92
93}
94
95
96.letters{
97  padding-top:10px;
98  padding-left:20px;
99  padding-right:20px;
100  font-size:28px;
101  line-height:130%;
102}
103
104
105.days{
106  text-align: center;
107  border:1px solid black;
108  font-size:22px;
109  margin-top:100px;
110
111
112}
113
114.days img{
115  width:200px;
116}
117
118

s8_chu

2017/06/25 07:23

tableの上の部分のHTML,CSSも追記していただけませんか？

miramikan

2017/06/25 07:38

追加いたしました！

退会済みユーザー

2017/06/25 09:54

ソースコードはファイルごとに分けて書いてください。

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

回答1件

ベストアンサー

こちらの環境ではmargin-topプロパティが反映されているようですが、CSSなどで他に記述していることはありませんか？もしないならば、一度キャッシュの消去を行ってから以下のコードを実行してみてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .days {
13            text-align: center;
14            margin-top: 100px;
15            font-size: 25px;
16            border: 1px solid black;
17
18        }
19
20        .days img {
21            width: 200px;
22        }
23    </style>
24</head>
25<body>
26<div class="header">
27    <h1></h1>
28</div>
29<div class="main">
30    <div class="photos">
31        <div id="photo01" class="photoframe">
32            <p class="photo">
33                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic.jpg">
34            </p>
35            <p class="hot"></p>
36        </div>
37        <div class="memo">
38            <div class="short">
39                <p></p>
40                <p></p>
41            </div>
42        </div>
43        <table class="days">
44            <tr>
45                <td>1人</td>
46                <td>2人</td>
47                <td>３人</td>
48                <td>4人</td>
49                <td>5人</td>
50            <tr>
51                <td>
52                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic1.png">
53                </td>
54                <td>
55                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic2.png">
56                </td>
57                <td>
58                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic3.png">
59                </td>
60                <td>
61                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic4.png">
62                </td>
63                <td>
64                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic5.png">
65                </td>
66            </tr>
67        </table>
68    </div>
69</div>
70</body>
71</html>

追記

変更した箇所はソースコード中にコメントとして記述しました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        body {
8            width: 100%;
9            margin: 0px;
10            padding: 0px;
11            background-color: white;
12
13        }
14
15        .main {
16            width: 100%;
17            height: 1000px;
18            padding: 100px 0px;
19            margin: 0px;
20        }
21
22        .whole-photo {
23            margin-left: 70px;
24            margin-top: 50px;
25            position: relative;
26        }
27
28        .photoframe {
29            position: relative;
30            display: inline;
31            float: left;
32            width: 340px;
33            height: 430px;
34            overflow: hidden;
35            margin: 0 10px 20px;
36            padding: 15px;
37            background: #ffffff;
38            border: 1px solid rgba(0, 0, 0, 0.3);
39            text-align: center;
40            -webkit-border-radius: 2px;
41            -moz-border-radius: 2px;
42            border-radius: 2px;
43            -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
44            -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
45            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
46            z-index: 1;
47        }
48
49        .photoframe .photo {
50            width: 340px;
51            height: 385px;
52            overflow: hidden;
53            margin: 0 0 10px;
54            padding: 0;
55            -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
56            -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
57            box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
58        }
59
60        .photoframe img {
61            position: relative;
62            display: block;
63            margin: 0;
64            padding: 0;
65            z-index: -1;
66            width: 339px;
67            height: 359px;
68        }
69
70        .memo { /* noteからmemoに変更 */
71            width: 390px;
72            height: 460px;
73            float: right;
74            margin-right: 160px;
75            position: relative;
76            background-color: #ffffe7;
77            background-image: linear-gradient(rgba(241, 207, 164, 0.5) .1em, transparent .1em);
78            background-size: 100% 1.5em;
79            line-height: 1.5em;
80        }
81
82        .in {
83            padding-bottom: 20px;
84            font-size: 28px;
85            margin-top: 5px;
86
87        }
88
89        .letters {
90            padding-top: 10px;
91            padding-left: 20px;
92            padding-right: 20px;
93            font-size: 28px;
94            line-height: 130%;
95        }
96
97        .days {
98            text-align: center;
99            border: 1px solid black;
100            font-size: 22px;
101            margin-top: 100px;
102            /* ここから追加 */
103            margin-left: auto;
104            margin-right: auto;
105            /* ここまで追加 */
106        }
107
108        .days img {
109            width: 200px;
110        }
111
112        /* ここから追加 */
113        .box::after {
114            content: ' ';
115            clear: both;
116            display: block;
117        }
118        /* ここまで追加 */
119    </style>
120</head>
121<body>
122<div class="header">
123    <h1>テキスト</h1>
124</div>
125<div class="main">
126    <div class="photos">
127        <div class="box"><!-- divタグを追加 -->
128            <div id="photo01" class="photoframe">
129                <p class="photo">
130                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic.jpg">
131                </p>
132                <p class="hot">テキスト</p>
133            </div>
134            <div class="memo">
135                <div class="short">
136                    <p>テキスト</p>
137                    <p>テキスト</p>
138                </div>
139            </div>
140        </div>
141        <table class="days">
142            <tr>
143                <td>1人</td>
144                <td>2人</td>
145                <td>3人</td>
146                <td>4人</td>
147                <td>5人</td>
148            <tr>
149                <td>
150                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic1.png">
151                </td>
152                <td>
153                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic2.png">
154                </td>
155                <td>
156                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic3.png">
157                </td>
158                <td>
159                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic4.png">
160                </td>
161                <td>
162                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic5.png">
163                </td>
164            </tr>
165        </table>
166    </div>
167</div>
168</body>
169</html>