displayをinline-blockにして画像の横に回り込ませると上の１行だけ空いてしまう。

Question

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

画像対して横並びの文字を並べたいがvertical-align: top; を使っても上に１行だけ空いてしまう。

###該当のソースコード

HTML

<div class="x">
      <h1>あああ</h1>
      <img class="xx" src="image">
      <p>ああああああああああああああああ<br>ああああああああああああああああああああああああ<br>
       ああああああああああああああああああ<br>ああああああああああああああああああああああああ<br>
       あああああああああああああああああああ<br>ああああああああああああああああああああああああ</p>
    </div>

css

xx{
  display: inline-block;
  vertical-align: top;
}

###試したこと

適用したい箇所が子要素のため親要素のdivをfont-size 0　
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[yambejp]

質問内容とソースがうまく噛み合っていないようです。課題がわかるようなソースを追記下さい

[退会済みユーザー]

問題のスクリーンショットを削除されたのはなぜですか？

Answer 1

こういうことでしょうか？

.xx{
display: inline-block;
float:left;
}

<div class="x">
<h1>あああ</h1>
<img class="xx" src="image" width=100 height=100>
<p>ああああああああああああああああ<br>
ああああああああああああああああああああああああ<br>
ああああああああああああああああああ<br>
ああああああああああああああああああああああああ<br>
あああああああああああああああああああ<br>
ああああああああああああああああああああああああ</p>
</div>

Answer 2

<p>要素のmarginを消せてないのでは？
Chromeなどのブラウザではデフォルトでmargin-top: 1em;が当たってたりします。

p {
  margin: 0;
}

と追記すると1行分の余白はなくなるはずです。

Comments

[kotetsu12]

他の方も回答ありがとうございました。無事解決しました。
margin-top: 1em;なかなか厄介でした。

[退会済みユーザー]

デフォルトの余計な余白やボーダーを消したい場合や、ブラウザに依存しない（差が少ない）デザインをしたい場合はリセットCSSを利用すると良いです。詳しくはリセットCSS等で検索してみてください。

[kotetsu12]

ありがとうございます。今後はリセットCSSを使っていこうと思います。

Answer 3

kotetsu12さん、こんにちは。

img要素とp要素が横並びになり、それぞれの頭の位置が揃えば良いのですよね？
もしそうであれば

<div class="x">
      <h1>あああ</h1>
      <img class="xx" src="image">
      <p class="hoge">ああああああああああああああああ<br>ああああああああああああああああああああああああ<br>
       ああああああああああああああああああ<br>ああああああああああああああああああああああああ<br>
       あああああああああああああああああああ<br>ああああああああああああああああああああああああ</p>
    </div>

css

xx{
  display: inline-block;
  vertical-align: top;
}

.hoge{
  display:inline-block;
}

でいかがでしょうか？
これであれば、

あああ
(画像)あああああ
□□□あああああ

(※□は空白)

の形で表示されるかと思います。
ご確認くださいませ。