CSSを使用してフロート画像の周りにテキストを折り返す方法を学びます。
この記事を紹介する写真のように、右側の画像にテキストを折り返すには、次のようなCSSルールを使用します。
float：leftルールを使用すると、画像が左マージンに移動します。 padding-rightルールは、テキストが画像の右側にぶつからないようにします。 この画像に境界線が追加された場合、画像と境界線の間にパディングが発生します。 境界線のある画像を操作するには、セクション2を参照してください。
次に、画像の左右に余白を追加して中央に配置します。 何かを中央に配置するための左右の余白の適切な値はautoです。
グルーブボーダースタイルを使用して太いフレームのようなボーダーを作成するには、次のようなルールを使用できます。
他の境界線のスタイルは、実線、点線、破線、二重、尾根、はめ込み、およびはめ込みです。 幅は、ピクセル、ems、またはパーセンテージで表すことができます。
境界線は、画像の上部、右側、下部、左側に選択的に適用できます。 この知識を使用して、ドロップシャドウのような効果を作成できます。
右と下の境界線に2シェードの灰色の実線の境界線を使用すると、ドロップシャドウ効果が得られます。
img {フロート：左; border-right-style：solid; border-right-width：8px; border-right-color：#CCCCCC; border-bottom-style：solid; border-bottom-width：8px; border-bottom-color：＃999999; マージン右：1em; マージンボトム：1em; }
ヒント
ページの複数の分割（div）に画像がある場合は、子孫セレクターを使用して個別にスタイルを設定します。 可能なセレクター：#content img、＃sidebar img、＃featureimg。
