HTML and CSS Reference
In-Depth Information
Inline Positioning Images
The
<img>
element is by default an inline-level element. Adding an image without any
styles to a page will position that image within the same line as the content that surrounds
it (see
Figure 9.4
). Additionally, the height of the line in which an image appears will be
changed to match the height of the image, which can create large vertical gaps within that
line.
1.
<p>Gatsby is a black, brown, and white hound mix puppy who loves
howling at fire trucks and collecting belly rubs.
<img src=
"dog.jpg" alt="A black, brown, and white dog wearing a kerchief">
Although he spends most of his time sleeping he is also quick to
chase any birds who enter his vision.</p>
Figure 9.4
An image displayed inline within a paragraph
Leaving images untouched in their default positioning isn't too common. More often than
not, images are displayed as block-level elements or are floated flush to one side.
Block Positioning Images
Adding the
display
property to an image and setting its value to
block
forces the image
to be a block-level element (see
Figure 9.5
). This makes the image appear on its own line,
allowing the surrounding content to be positioned above and below the image.
1.
img {
2.
display: block;
3.
}
Search WWH ::
Custom Search