高さが同じなのになぜずれますか？

左図上のようになぜ高さが50pxと同じなのにずれますか？
下の動画の1分52秒になります
リンク内容

よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>CSS3 Practice</title>
6    <link rel="stylesheet" href="default.css">
7  </head>
8  <body>
9      <div id="box1"></div>
10      <div id="box2"></div>
11  </body>
12</html>
13

CSS
1div {
2  width: 100px;
3  height: 50px;
4  background: skyblue;
5
6  /*transition-property:all;
7  transition-duration:2s;
8  transition-timing-function:ease;
9  transition-delay:0.8s;*/
10  transition: all 2s ease 0.8s;
11}
12
13div:hover {
14  width: 200px;
15  height: 50px;
16  background: blue;
17}
18

退会済みユーザー

2017/04/04 14:37

「左図上」とはなんですか。

goforward

2017/04/04 15:10

画像の読み込みに時間がかかりました。次から気を付けます。申し訳ありません

kei344

2017/04/04 18:35

何がどうずれているのかをもう少し説明してください。

goforward

2017/04/05 03:32 編集

左下図が正解なのですが、これはもともとは水色で高さが同じですので、横に青色になりながら変形しています。しかし私の左上図では高さが同じなのに青が水色のなかに２つ分あります。本来は一つ分なはずです。正方形の辺を横だけ伸ばすのが正解ですが、僕のは高さも半分にしながら、横の辺も長くなっています。該当動画を載せますので少々お待ちください

s8_chu

2017/04/05 03:49

青が水色のなかに２つ分とは、質問者さんが box1, box2を記述しているから2つあるのではないのですか？違うならば、もう少し具体的に教えていただけると嬉しいです。

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

回答3件

ベストアンサー

質問への追記・修正の依頼でも書いてしまいましたが、divタグは1つだけで十分なのではないのですか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>CSS3 Practice</title>
6    <link rel="stylesheet" href="default.css">
7  </head>
8  <body>
9      <div id="box1"></div>
10  </body>
11</html>

default.css

CSS
1div {
2  width: 100px;
3  height: 50px;
4  background: skyblue;
5
6  /*transition-property:all;
7  transition-duration:2s;
8  transition-timing-function:ease;
9  transition-delay:0.8s;*/
10  transition: all 2s ease 0.8s;
11}
12
13div:hover {
14  width: 200px;
15  height: 50px;
16  background: blue;
17}