divタグをinline-blockに指定すると親要素内(block)の左上に配置されない理由について

前提・実現したいこと

html5とcss3でwebデザインデータをもとに模写しています。
divタグをcssにてinline-blockへ変更しましたが、
なぜか親要素であるblock要素の下に並ばず、中途半端な位置に配置されてしまいます。
私の考えでは、inline-block要素へ変更しても親要素内(block)の左上に配置されると思うのですが、
この理由が知りたいです。

発生している問題・エラーメッセージ

下画像の検証ツールでマーキングしている箇所が中途半端な位置に配置されてしまった画像です。

下画像の様な位置に配置されると思うのですが、.contentセレクタに対しinline-blockを指定すると
上画像の様な位置に配置されてしまいます。

該当のソースコード

html5
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Bunny!</title>
7    <link rel="stylesheet" href="./styles.css">
8</head>
9<body>
10    <header>
11        <div class="container">
12            <div class="header-left">
13                <img src="./img/logo.png" width="160" height="60" alt="ロゴ">
14            </div>
15            <div class="header-right">
16                <button type="button" class="btn btn-pink">お問い合わせ</button>
17            </div>
18        </div>
19        <div class="clear"></div>
20    </header>
21    <div class="wrapper">
22        <div class="content">
23            <div class="article">
24                <h1>かわいいのは、うさぎ。</h1>
25                <p>うさぎは世界で一番かわいい動物です。どうしてこんなにかわいいのでしょうか？今回はうさぎに癒されながらサイトを作っていきましょう。</p>
26            </div>
27            <button type="button" class="btn btn-pink">うさぎとは?</button>
28            <button type="button" class="btn btn-white">うさぎの可愛さの秘密</button>
29        </div>
30        <div class="thumb">
31            <img src="./img/mv.png" width="600" height="345" alt="背景画像">
32        </div>
33    </div>
34    <footer></footer>    
35</body>
36</html>

css3
1body {
2    margin: 0;
3    padding: 0;
4    font-family: '游ゴシック体';
5}
6
7/* header */
8header {
9    height: 90px;
10    width: 1280px;
11    margin: 0 auto;
12}
13
14.container {
15    width: 1080px;
16    margin: 0 auto;
17}
18
19.header-left {
20    float: left;
21    height: 90px;
22}
23
24.header-left img {
25    padding: 15px 0;
26}
27
28.header-right {
29    float: right;
30}
31
32.header-right {
33    padding: 21px 0 ;
34}
35
36.clear {
37    clear: both;
38}
39
40.btn {
41    border-radius: 28px;
42    padding: 13px 30px 15px;
43    font-size: 20px;
44    line-height: 20px;
45    box-shadow: 3px 3px 10px #00000029;
46}
47
48.btn-pink {
49    background-color: #EC84A0;
50    color: #FFFFFF;
51    font-size: 18px;
52    padding: 15px 30px;
53}
54
55.btn-white {
56    background-color: #FFFFFF;
57    color: #EC84A0;
58    border: 2px solid #EC84A0;
59    font-size: 18px;
60    padding: 15px 30px;
61}
62
63/* wrapper */
64.wrapper {
65    background-image: url(./img/bg.png);
66    background-repeat: repeat;
67    width: 1280px;
68    height: 571px;
69    margin: 0 auto;
70    padding-top: 24px;
71}
72
73.content {
74    padding: 0 48px 0 100px;
75    width: 422px;
76    height: 250px;
77    display: inline-block; /* 該当箇所 */
78}
79
80.article {
81    width: 400px;
82}
83
84.article h1 {
85    line-height: 1;
86    font-size: 36px;
87    margin: 0;
88}
89
90.article p {
91    margin: 40px 0;
92}
93
94.thumb {
95    display: inline-block;
96    padding: 96px 100px 130px 0;
97}

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

回答1件

ベストアンサー

display: inline-block;で画像ブロック(.thumb)が横に来ますが、２つの要素の下辺の位置が揃いますので、その分.contentは下がります。垂直位置(vertical-align)の初期値はbaselineですので。

vertical-align: top; を追加することで上辺が揃います。

css
1.content {
2    padding: 0 48px 0 100px;
3    width: 422px;
4    height: 250px;
5    display: inline-block; /* 該当箇所 */
6    vertical-align: top; /*追加*/
7}

ただし、
横並びにするならdisplay: inline-block;を使うよりFlexboxを使う方法をお勧めします。
親要素にdisplay: flex;を設定すれば子要素は横並びになります。
子要素のdisplay: inline-block;は不要になります。

css
1.wrapper {
2    background-image: url(./img/bg.png);
3    background-repeat: repeat;
4    width: 1280px;
5    height: 571px;
6    margin: 0 auto;
7    padding-top: 24px;
8    display: flex; /*追加*/
9}

投稿2020/03/11 17:39

編集2020/03/11 17:47

hatena19

総合スコア34075

kazuhito0106

2020/03/12 13:55

hatena19様回答ありがとうございます！すみません、要素の下辺の位置が揃うという要素とは、画像ブロック(.content)と画像ブロック(.thumb)のことでしょうか。

hatena19

2020/03/12 14:12

はい、そうです。

kazuhito0106

2020/03/12 14:35

ありがとうございます。要素の下辺の位置というのはどこのことでしょうか。

hatena19

2020/03/13 11:29

とりあえず、下記のリンク先の解説を読んでください。 vertical-align－スタイルシートリファレンス http://www.htmq.com/style/vertical-align.shtml 簡単に説明するために下辺と言いましたが、実際はもっと複雑です。現在では、横並びするなら、display: flex; を使うのがシンプルだし、理解しやすいと思います。もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends https://webdesign-trends.net/entry/8148

kazuhito0106

2020/03/14 05:04

解説のご提示ありがとうございます。この場合、画像ブロック(.content)の親要素である(.wrapper)のベースラインに画像ブロック(.content)が来るためその分下がっているということですね。 display: flexを(.wrapper)に適用すると子要素の(.content)(.thumb)と併せて(.wrapper)も左にずれてしまうのですが、なぜでしょうか。。

hatena19

2020/03/14 06:54

当方で作成したサンプルでは display: flex を追加するだけで左にずれるということはありませんでした。希望のものと違うのなら、別内容の質問になると思いますので、別に新規に質問しなおして、現時点でのHTMLとCSSを提示して、どこが希望と違うのか説明してください。

kazuhito0106

2020/03/15 15:30

ありがとうございます。新たに質問させていただきたいと思います。

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