margin-topを％で指定したら横幅に依存するようになった。

以下のような単純なhtmlなのですが、
４つのボタンを縦に整列させようとしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
*{
	box-sizing:border-box;
	position:relative;
}
html,body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
body{
	background-color:red;
}
#content{
	width:100%;
	height:100%;
	position:relative;
	background-color:white;
}
button{
	width:50%;
	margin-left:25%;
	height:10%;
	margin-top:12%;
}
</style>
</head>
<body>
	<div id="content">
		<button>ボタン１</button>
		<button>ボタン２</button>
		<button>ボタン３</button>
		<button>ボタン４</button>
	</div>
</body>
</html>

私の思いとしては、
縦10%×4と
余白12%×5（ボタン４の下も含む）で
下の様にきっちり縦に並ぶはずでした。

でも実際はmargin-topの部分が横幅に依存するようで、
横幅を変えると伸び縮みしてしまいます。

上の図は、buttonの

	height:10%;
	margin-top:12%;

を

	height:10vh;
	margin-top:12vh;

とすることで実現させてますが、
親要素のサイズに依存させたいので%を使用したいです。

今までこんなことで躓いた事がないので、
狐につままれたような感じなのですが、
これってどこがおかしいでしょうか？
margin-top:x%;
って横のサイズに依存するようなものなのでしょうか？

OSは、Windows7 Pro
ブラウザは、ChromeとIE11の最新バージョンです。

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

回答1件

ベストアンサー

margin-topは親要素の幅を基準にしているそうです。
以前こんな記事を見かけました。

CSS で上下 margin のパーセント (%) 指定が上手く行かない原因
http://www.webmagazine.kakisiti.co.jp/?p=305
レスポンシブWebデザインでハマりがちな%指定
http://design-spice.com/2014/03/24/percentag/

幅が広ければそれにあわせて必要な余白も変わるだろう、ということなのでしょう。

投稿2017/01/16 01:24

koronatail

総合スコア433

nobuzoh

2017/01/16 01:30

おぉ・・・、「常識」なのですね・・・。今まで躓かなかったのはたまたまだったようです。ありがとうございました！

nobuzoh

2017/01/16 04:22

ちなみに、 buttonのpositionをabsoluteにして、 button:nth-child(1){top:12%;} button:nth-child(2){top:34%;} button:nth-child(3){top:56%;} button:nth-child(4){top:78%;} の様にすることで解決しました。

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