HTMLのコンテンツ上部にスペースが出来てしまう。

簡単なHTMLの質問で大変恐縮なのですが、コンテンツの上部にスペースができてしまって困っています。

以下のようなイメージでHTMLを作成しようとしています。（背景色は分かりやすくするためにつけています）

実際作成したHTMLは以下のように表示されています。
画面イメージのエリアの上部にスペースができてしまっているため、画面イメージエリアを上に詰めたいです。

画像イメージエリアとフォームエリア（ログインボタンなどあるエリア）は、
それぞれdivタグでつくっておりdisplayプロパティをinline-blockに設定しています。
そのため、うまく横並びになってくれると思ったのですが、うまく出来ませんでした。

どこがダメなのかご教示いただけないでしょうか。

HTML
1<!DOCTYPE html>
2<html>
3    <body>
4        <div class="contents">
5            <div id="imageArea">画像イメージ</div>
6            <div id="formArea">
7                <div class="input-area">
8                    <label class="input-label">ユーザー名</label>
9                    <input type="text" class="input-text" placeholder="commando@xxx.com">
10                </div>
11                <div class="input-area">
12                    <label class="input-label">パスワード</label>
13                    <input type="password" class="input-text">
14                </div>
15                <div class="input-buttom">
16                    <input type="button" value="ログイン" class="input-buttom">
17                </div>
18            </div>
19        </div>
20    </body>
21</html>
22<style>
23.contents{
24    padding-left: 15px;
25    width:600px;
26    border:1px solid black;
27}
28.input-text{
29    width:200px;
30    margin:5px 0px 5px 0px;
31}
32.input-buttom{
33    text-align:center;
34    margin:5px 0px 5px 0px;
35}
36#imageArea{
37    width:150px;
38    height:200px;
39    border:1px solid lime;
40    display: inline-block;
41    margin-top:10px;
42    margin-bottom:10px;
43}
44#formArea{
45    width:300px;
46    border:1px solid deepskyblue;
47    display: inline-block;
48    margin-top:10px;
49    margin-bottom:10px;
50}
51</style>

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

回答1件

ベストアンサー

「横並びレイアウト」をするなら.contentsをdisplay:flex;にするほうがコントロールしやすい気がします。

CSS
1#imageArea{
2    width:150px;
3    height:200px;
4    border:1px solid lime;
5    display: inline-block;
6    margin-top:10px;
7    margin-bottom:10px;
8    vertical-align: top;/* ADD */
9}
10```**動くサンプル：**[https://jsfiddle.net/wh18vm9e/](https://jsfiddle.net/wh18vm9e/)
11
12---
13
14【これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス】
15[http://www.webcreatorbox.com/tech/flexbox/](http://www.webcreatorbox.com/tech/flexbox/)
16
17【よこ並びのCSS。】
18[http://lopan.jp/layout/](http://lopan.jp/layout/)
19
20【段組みのCSS。】
21[https://lopan.jp/layout2/](https://lopan.jp/layout2/)

投稿2019/12/14 17:38

kei344

総合スコア69596

kei344

2019/12/14 19:34

「なぜそうなるのか」を書いていなかった。inline-blockはvertical-alignの影響を受けるので、デフォルト値に沿って並ぼうとします。vertical-align: top;とすることで、上端を基準に並べることができます。【vertical-alignが効かないパターンと、効くパターン | HPcode】 https://haniwaman.com/vertical-align/ 【理解しておきたい、CSSによるインラインレイアウトの仕組み（vertical-align編その2）Inline Layout─Frontrend Conference | HTML5Experts.jp】 https://html5experts.jp/takazudo/13592/

yamaki

2019/12/15 12:57

ご回答くださり、ありがとうございます。レイアウト崩れの原因について、理解することが出来ました。また、様々な参考サイトを教えていただきありがとうございます。 vertical-alignやflexboxの使い方について理解を深めることが出来ました。今回は教えてくださったdisplay:flex;で実装しようと思います。

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