画像に余白を指定してfloatでキレイに横並びにする方法。

などで、画像を左（右）に、テキストを右（左）にする時、基本的にはfloatで横並びにすると思います。

例えば、画像の横幅が100pxなら、下記のようにCSSを指定するのではないでしょうか？

.image {
  float:left;
}
.text {
  margin-left:120px;
}

ただ、このCSSだと、動的に画像のサイズが変わる時に上手く対応できません。

画像の横幅が130pxならテキストの余白を150pxにする必要があるし、画像の横幅が150pxならテキストの余白を170pxにする必要があるからです。

その対処法としては、画像の親要素にサイズを指定するのが最も簡単ですが、画像の縦横の比率が違う場合や、サイズが小さすぎる（大きすぎる）場合には、あまり使いたくない方法。

できれば、画像側で余白を設定したいですよね？

意外と便利なoverflow:hidden

そこで、おすすめなのが下記のCSS。

overflow:hidden;

「要素からはみ出すものは表示しない」というコードで、主に、デザインが崩れないように使うCSSなんですが、実は、違う使い方もできます。

一体どのように使うのかサンプルで確認してみましょう。

こちらが問題のケース。ご覧のように、画像の横幅がテキストの余白よりも大きいため、テキストが回り込んでデザインが崩れています。

See the Pen PjNgXe by Chef (@chef-aomori) on CodePen.

こちらが、テキストにoverflow:hiddenを適用したサンプル。余白は画像側で設定しているので、画像のサイズが動的に変わっても対応できます。

画像が動的に変化して困ることもあまりないかもしれませんが、身近な活用例だと、スマホとPCとでサムネイル画像のサイズを変える場合などが考えられるでしょうか。

例えば、スマホ表示時の横幅を100px、PC表示時の横幅を150pxにするなら、テキストを横並びで表示させるために、

.image {
  float:left;
}
.text {
  margin-left:120px;
}
@media only screen and (min-width: 780px) {
.text {
  margin-left:170px;
}
}

のように、テキスト側の余白を画面幅に合わせて変更する必要がありますが、テキストにoverflow:hiddenを指定すれば、メディアクエリを使う必要はありません。

.image {
  float:left;
  margin-right:20px;
}
.text {
  overflow:hidden;
}

テキスト側で余白を設定するより、画像側で余白を設定した方が管理しやすいので、おすすめですよ。

以上、ご参考までに！(｀･ω･´)ゞ