Q&A
ありがとうございます！
<style>
.image {
float: left;
width: 100px;
}
.text {
margin: 0 0 0 8px;
}
</style>
<body>
<img src="画像のurl" width="100" height="100" class="image">
<p class="text">テキスト</p>
</body>
このように書くと、marginのおかげで画像の右側に8pxの距離を置いてテキストが書かれると思ったのですが、全く距離が取れません。この8pxの部分を108pxと置くと、ちょうど8pxと思われる距離が取れます。おそらくmarginをあまり理解できていないのかもしれませんが、何が間違っているのでしょうか。
回答2件
0
ベストアンサー
floatを外してみてください。
【floatプロパティの挙動(初心者)】
http://hyouban.click/html/float-behavior/
レイアウトを組む際に float: や position: については、それでしか表現できない処理ならともかく、一度避けて考えてみることをお勧めします。
【よこ並びのCSS。】
http://lopan.jp/layout/
【段組みのCSS。】
https://lopan.jp/layout2/
追記：
本文中とかならfloat側にmarginで。（縦積みと勘違いしていて、yoshinaviさんの回答で横並びしたいことに気が付きました）
CSS
1.image { 2 float: left; 3 width: 100px; 4 margin: 0 8px 0 0; 5} 6```**動くサンプル：**[https://jsfiddle.net/f21879aj/](https://jsfiddle.net/f21879aj/)
投稿2019/02/09 18:45
編集2019/02/10 02:46
総合スコア69398
0
各要素を横並びにする方法はいくつかありますが、提示コードのfloatで横並びにする場合、両方に掛ける必要があります。
※どこで「float解除」するのかで、レイアウトにも影響します。
CSS
1.image { 2 float: left; 3 width: 100px; 4} 5 6.text { 7 float: left; /* ← 追加 */ 8 margin: 0 0 0 8px; 9} 10
投稿2019/02/10 00:54
総合スコア3523
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/10 05:50
2019/02/10 07:29