teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップHTML5に関する質問overflow:hiddenとmarginの関係性

編集履歴

回答編集履歴

6

一部見やすいようにコードを改善

2017/09/04 22:04

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -99,6 +99,7 @@
99
99
  .child {
100
100
  background-color: yellow;
101
101
  margin-top: 250px;
102
+ margin-left: 10px;
102
103
  }
103
104
  </style>
104
105
  <script>
@@ -119,13 +120,13 @@
119
120
  parentStyle = parent.style;
120
121
  if(parentStyle.overflow=="hidden"){
121
122
  parentStyle.overflow = "";
122
- disp1.innerHTML = "childのmargin:250px;が適用";
123
+ disp1.innerHTML = "childのmargin-top: 250px;が適用";
123
124
  disp2.innerHTML = "";
124
125
  button.innerHTML = "現在 : none";
125
126
  }else{
126
127
  parentStyle.overflow = "hidden";
127
- disp1.innerHTML = "parentのmargin:100px;が適用";
128
+ disp1.innerHTML = "parentのmargin-top: 100px;が適用";
128
- disp2.innerHTML = "childのmargin:250px;が適用";
129
+ disp2.innerHTML = "childのmargin-top: 250px;が適用";
129
130
  button.innerHTML = "現在 : hidden";
130
131
  }
131
132
  },false);
@@ -133,7 +134,7 @@
133
134
  </script>
134
135
  </head>
135
136
  <body>
136
- <span id="disp1">childのmargin:250px;が適用</span>
137
+ <span id="disp1">childのmargin-top: 250px;が適用</span>
137
138
  <div class="parent">
138
139
  <span id="disp2"></span>
139
140
  <div class="child">

5

;を付け足し

2017/09/04 22:04

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -110,7 +110,7 @@
110
110
 
111
111
  window.onload = function(){
112
112
  disp1 = document.getElementById("disp1");
113
- parent = document.getElementsByClassName("parent")[0]
113
+ parent = document.getElementsByClassName("parent")[0];
114
114
  disp2 = document.getElementById("disp2");
115
115
  button = document.getElementById("button");
116
116
 

4

インデントを修正

2017/09/04 19:53

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -92,13 +92,13 @@
92
92
  <title>sousai</title>
93
93
  <style>
94
94
  .parent {
95
- background-color: red;
95
+ background-color: red;
96
- margin-top: 100px;
96
+ margin-top: 100px;
97
97
  }
98
98
 
99
99
  .child {
100
- background-color: yellow;
100
+ background-color: yellow;
101
- margin-top: 250px;
101
+ margin-top: 250px;
102
102
  }
103
103
  </style>
104
104
  <script>
@@ -109,28 +109,26 @@
109
109
  var button;
110
110
 
111
111
  window.onload = function(){
112
- disp1 = document.getElementById("disp1");
112
+ disp1 = document.getElementById("disp1");
113
- parent = document.getElementsByClassName("parent")[0]
113
+ parent = document.getElementsByClassName("parent")[0]
114
- disp2 = document.getElementById("disp2");
114
+ disp2 = document.getElementById("disp2");
115
- button = document.getElementById("button");
115
+ button = document.getElementById("button");
116
116
 
117
117
 
118
- button.addEventListener("click",function(){
118
+ button.addEventListener("click",function(){
119
- parentStyle = parent.style;
119
+ parentStyle = parent.style;
120
- if(parentStyle.overflow=="hidden"){
120
+ if(parentStyle.overflow=="hidden"){
121
- parentStyle.overflow = "";
121
+ parentStyle.overflow = "";
122
- disp1.innerHTML = "childのmargin:250px;が適用";
122
+ disp1.innerHTML = "childのmargin:250px;が適用";
123
- disp2.innerHTML = "";
123
+ disp2.innerHTML = "";
124
-
125
- button.innerHTML = "現在 : none";
124
+ button.innerHTML = "現在 : none";
126
- }else{
125
+ }else{
127
- parentStyle.overflow = "hidden";
126
+ parentStyle.overflow = "hidden";
128
- disp1.innerHTML = "parentのmargin:100px;が適用";
127
+ disp1.innerHTML = "parentのmargin:100px;が適用";
129
- disp2.innerHTML = "childのmargin:250px;が適用";
128
+ disp2.innerHTML = "childのmargin:250px;が適用";
130
-
131
- button.innerHTML = "現在 : hidden";
129
+ button.innerHTML = "現在 : hidden";
132
- }
130
+ }
133
- },false);
131
+ },false);
134
132
  }
135
133
  </script>
136
134
  </head>

3

調べ直し、色々追記しました。

2017/09/04 19:43

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -1,3 +1,5 @@
1
+ ※追記しました。見ていただけると幸いです。
2
+
1
3
  同じく初心者ですが、簡単にテスト用のHTMLを書いてみました。
2
4
 
3
5
  ```lang-html
@@ -58,4 +60,92 @@
58
60
 
59
61
  ボタンをクリックしてもらえばわかると思いますが、そもそもoverflowとmarginは関係ないように見えます。
60
62
 
61
- 参考になれば。
63
+ 参考になれば。
64
+
65
+ ###追記
66
+
67
+ ごめんなさい私自信相殺についてわかってなかったみたいです。
68
+
69
+ maisumakun様やMasakazuFukami様の回答を読ませていただいてから調べました。
70
+
71
+ ただ私が間違ってしまったのは、(私の場合はですが)最初からoverflowが設定されていた時の挙動の方が自然に見えたからかもしれません。
72
+
73
+ その挙動というのは、overflowを設定すると、子要素のmarginがbodyに対してではなく、parentに対して行われるようになる、というものです。最初から全てこういう仕様(marginは常に直近の親要素に対して適用されるという仕様)の方がいいように私は感じましたが、
74
+ 何か理由があるのだと思います。(多分その理由というのが他の回答者様のおっしゃる仕様関連のところにあるのでしょう。)
75
+
76
+ overflowがないと子要素のmarginはbodyに対するものになっていますね。
77
+ ある場合はparentに対するものになっていますから、構造的なもの、となるとこの挙動が解決案にはならないでしょうか？
78
+
79
+ また質問者様の質問を読んでいると、むしろ「相殺されるのはなぜですか？」みたいになるのかと思いました。
80
+
81
+ というのはもしoverflow:hidden;によってbodyに対してmarginがついたままで、parentのmarginがchildのmarginより大きく、さらに相殺されないならば、childの方はparentより上に行くことで、childの一部または全部がhiddenをvisibleにしないと見ることができない領域に行くであろうからです。
82
+
83
+ 実際はparentからのmarginとなるので、子要素はあたかも相殺されたかのように下に行き、さらには自身のmarginによってさらに下に行きます。
84
+
85
+ その様子を見れるように改めてhtmlを書いてみました。言いたいことが伝われば幸いです。
86
+
87
+ ```lang-html
88
+ <!doctype html>
89
+ <html>
90
+ <head>
91
+ <meta charset="utf-8">
92
+ <title>sousai</title>
93
+ <style>
94
+ .parent {
95
+ background-color: red;
96
+ margin-top: 100px;
97
+ }
98
+
99
+ .child {
100
+ background-color: yellow;
101
+ margin-top: 250px;
102
+ }
103
+ </style>
104
+ <script>
105
+ var disp1;
106
+ var parent;
107
+ var parentStyle;
108
+ var disp2;
109
+ var button;
110
+
111
+ window.onload = function(){
112
+ disp1 = document.getElementById("disp1");
113
+ parent = document.getElementsByClassName("parent")[0]
114
+ disp2 = document.getElementById("disp2");
115
+ button = document.getElementById("button");
116
+
117
+
118
+ button.addEventListener("click",function(){
119
+ parentStyle = parent.style;
120
+ if(parentStyle.overflow=="hidden"){
121
+ parentStyle.overflow = "";
122
+ disp1.innerHTML = "childのmargin:250px;が適用";
123
+ disp2.innerHTML = "";
124
+
125
+ button.innerHTML = "現在 : none";
126
+ }else{
127
+ parentStyle.overflow = "hidden";
128
+ disp1.innerHTML = "parentのmargin:100px;が適用";
129
+ disp2.innerHTML = "childのmargin:250px;が適用";
130
+
131
+ button.innerHTML = "現在 : hidden";
132
+ }
133
+ },false);
134
+ }
135
+ </script>
136
+ </head>
137
+ <body>
138
+ <span id="disp1">childのmargin:250px;が適用</span>
139
+ <div class="parent">
140
+ <span id="disp2"></span>
141
+ <div class="child">
142
+ child
143
+ </div>
144
+ parent
145
+ </div>
146
+ <button id="button">現在 : none</button>
147
+ </body>
148
+ </html>
149
+ ```
150
+
151
+ (長文、乱文、また初心者な回答、失礼しました。m(_ _)m)

2

template->overflow

2017/09/04 19:35

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -5,7 +5,7 @@
5
5
  <html>
6
6
  <head>
7
7
  <meta charset="utf-8">
8
- <title>template</title>
8
+ <title>overflow</title>
9
9
  <style type="text/css">
10
10
  #parent {
11
11
  background-color: lightskyblue;

1

わかりやすいよう内容を一部変更

2017/09/04 13:42

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -28,12 +28,16 @@
28
28
  <script>
29
29
 
30
30
  window.onload = function(){
31
+ var button_elem = document.getElementById('button');
32
+
31
- document.getElementById('button').addEventListener("click",function(){
33
+ button_elem.addEventListener("click",function(){
32
34
  var parentStyle = document.getElementById('parent').style;
33
35
  if(parentStyle.overflow == 'hidden'){
34
36
  parentStyle.overflow = 'visible';
37
+ button_elem.innerHTML = '現在 : visible';
35
38
  }else{
36
39
  parentStyle.overflow = 'hidden';
40
+ button_elem.innerHTML = '現在 : hidden';
37
41
  }
38
42
  },false);
39
43
  }
@@ -47,7 +51,7 @@
47
51
  </div>
48
52
  </div>
49
53
  <br />
50
- <button id="button">表示切り替え</button>
54
+ <button id="button">現在 : visible</button>
51
55
  </body>
52
56
  </html>
53
57
  ```