質問: 以下のような単純なhtmlなのですが、 4つのボタンを縦に整列させようとしています。 ``` test ボタン1 ボタン2 ボタン3 ボタン4 ``` 私の思いとしては、 縦10%×4と 余白12%×5(ボタン4の下も含む)で 下の様にきっちり縦に並ぶはずでした。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/7fa9799a037e0ae5dc53aa67cdca37ad.png) でも実際はmargin-topの部分が横幅に依存するようで、 横幅を変えると伸び縮みしてしまいます。 上の図は、buttonの ``` height:10%; margin-top:12%; ``` を ``` height:10vh; margin-top:12vh; ``` とすることで実現させてますが、 親要素のサイズに依存させたいので%を使用したいです。 今までこんなことで躓いた事がないので、 狐につままれたような感じなのですが、 これってどこがおかしいでしょうか? margin-top:x%; って横のサイズに依存するようなものなのでしょうか? OSは、Windows7 Pro ブラウザは、ChromeとIE11の最新バージョンです。
回答: margin-topは親要素の**幅**を基準にしているそうです。 以前こんな記事を見かけました。 CSS で上下 margin のパーセント (%) 指定が上手く行かない原因 http://www.webmagazine.kakisiti.co.jp/?p=305 レスポンシブWebデザインでハマりがちな%指定 http://design-spice.com/2014/03/24/percentag/ 幅が広ければそれにあわせて必要な余白も変わるだろう、ということなのでしょう。