Adding Media - Learn to Code HTML and CSS: Develop and Style Websites - page 181

Figure 9.5 An image displayed as a block within a paragraph
Positioning Images Flush Left or Right
Sometimes displaying an image as inline or block , or perhaps even inline-block ,
isn't ideal. We may want the image to appear on the left or right side of its containing ele-
ment, while all of the other content wraps around the image as necessary. To do this, we
use the float property with a value of either left or right .
Remembering back to Lesson 5 , “ Positioning Content , ” we recall that the float property
was originally intended to position images to the left or right of a containing element. Now
we'll use it for that original purpose.
Floating an image is a start; however, all other content will align directly against it. To
provide spacing around an image, we'll use the margin property (see Figure 9.6 ). Ad-
ditionally, we can use the padding , border , and background properties to build a
frame for the image, if desired.
Click here to view code image
1. img {
2. background: #e8eae9;
3. border: 1px solid #c6c9cc;
4. float: right;
5. margin: 8px 0 0 20px;
6. padding: 4px;
7. }