Styling Images
The <img> element is a unique element from the styling point of view. It is an inline element; however, in some aspects, it behaves differently from the other inline elements.
Inline Element Aspects
Like other inline elements, by default, the width of the <img> element is determined by the length of the content, and no line break is created between inline elements. If you place multiple images, the images are placed in the same line. If the total width of images exceeds the line length, the images that are not placed within the first line go to the next line.
You can also use CSS properties that are applicable to inline elements such as text-align and vertical-align.
Practice 1
Objective:
Check how images are placed along lines
1. Update the body section of the HTML file
Add the code below at the end of the <body> section in the chapter11.html file. In this code, we are using an image file that we prepared in another practice before, but you can use any image for this. To make the differences clear, we also added <div> (block elements) and <span> (inline elements) using the size-object class defined in the previous chapter.
<h2>Styling Images</h2>
<h3> Images as an Inline Element</h3>
<img src="img/salad.jpg" width="200px">
<img src="img/salad.jpg" width="200px">
<img src="img/salad.jpg" width="200px">
<img src="img/salad.jpg" width="200px">
<img src="img/salad.jpg" width="200px">
<img src="img/salad.jpg" width="200px">
<img src="img/salad.jpg" width="200px">
<img src="img/salad.jpg" width="200px">
<div class="size-object"> Block Element Example</div>
<div class="size-object"> Block Element Example</div>
<span class="size-object"> Inline Element Example</span>
<span class="size-object"> Inline Element Example</span>
<span class="size-object"> Inline Element Example</span>
<span class="size-object"> Inline Element Example</span>
<span class="size-object"> Inline Element Example</span>
<span class="size-object"> Inline Element Example</span>
2. Check the result with a browser
- Open chapter11.html with a browser.
- You can confirm that images are behaving as inline elements.
You can also check the sample result here (Demo Site).
Practice 2
Objective:
Check how the text-align property works for the <img> element
1. Update the body section of the HTML file
Add the code below at the end of the <body> section in the chapter11.html file. In this code, we are using the parent-box class defined in a previous practice.
<h3> Text Align for Image Element</h3>
<div class="parent-box" style="text-align: left;">
<img src="img/salad.jpg" height="50px">
</div>
<div class="parent-box" style="text-align: center;">
<img src="img/salad.jpg" height="50px">
</div>
<div class="parent-box" style="text-align: right;">
<img src="img/salad.jpg" height="50px">
</div>
2. Check the result with a browser
- Open chapter11.html with a browser.
- You can confirm that
text-alignworks for the<img>element.
You can also check the sample result here (Demo Site).
Sizing and Spacing
The major differences between the <img> element and other inline elements are sizing and spacing. You can set width and height for the <img> element. Also, you can set padding and margin both horizontally and vertically.
Practice 3
Objective:
Check how sizing and spacing work for the <img> tag
1. Update the body section of the HTML file
Add the code below at the end of the <body> section in the chapter11.html file. In this practice, we are using two new cases: 1) one image with paddings and margins, and 2) multiple images with paddings and margins. We are also adding <br> tags to avoid object overlaps.
<h3> Adding Paddings and Margins to Image</h3>
<div style="background-color: #55D0DC; text-align: center; width: 300px; margin: 5px;">
<img src="img/salad.jpg" style="height:50px; margin:20px; padding: 15px; background-color: #B3EBEF;">
</div>
<div style="background-color: #55D0DC; text-align: center; width: 300px; margin: 5px;">
<span style="height:50px; margin:20px; padding: 15px; background-color: #B3EBEF;">Inline Element</span>
</div>
<h3> Multiple Images with Paddings and Margins</h3>
<img src="img/salad.jpg" style="height: 50px; margin: 20px; padding: 20px; background-color: #B3EBEF;">
<img src="img/salad.jpg" style="height: 50px; margin: 20px; padding: 20px; background-color: #B3EBEF;">
<img src="img/salad.jpg" style="height: 50px; margin: 20px; padding: 20px; background-color: #B3EBEF;">
<img src="img/salad.jpg" style="height: 50px; margin: 20px; padding: 20px; background-color: #B3EBEF;">
<img src="img/salad.jpg" style="height: 50px; margin: 20px; padding: 20px; background-color: #B3EBEF;">
<img src="img/salad.jpg" style="height: 50px; margin: 20px; padding: 20px; background-color: #B3EBEF;">
<img src="img/salad.jpg" style="height: 50px; margin: 20px; padding: 20px; background-color: #B3EBEF;">
<img src="img/salad.jpg" style="height: 50px; margin: 20px; padding: 20px; background-color: #B3EBEF;">
<br>
<br>
<span style="height: 50px; padding: 20px; margin: 20px; border: 1px dotted #B3EBEF; background-color: #55D0DC;">Inline Element</span>
<span style="height: 50px; padding: 20px; margin: 20px; border: 1px dotted #B3EBEF; background-color: #55D0DC;">Inline Element</span>
<span style="height: 50px; padding: 20px; margin: 20px; border: 1px dotted #B3EBEF; background-color: #55D0DC;">Inline Element</span>
<span style="height: 50px; padding: 20px; margin: 20px; border: 1px dotted #B3EBEF; background-color: #55D0DC;">Inline Element</span>
<span style="height: 50px; padding: 20px; margin: 20px; border: 1px dotted #B3EBEF; background-color: #55D0DC;">Inline Element</span>
<span style="height: 50px; padding: 20px; margin: 20px; border: 1px dotted #B3EBEF; background-color: #55D0DC;">Inline Element</span>
<span style="height: 50px; padding: 20px; margin: 20px; border: 1px dotted #B3EBEF; background-color: #55D0DC;">Inline Element</span>
<span style="height: 50px; padding: 20px; margin: 20px; border: 1px dotted #B3EBEF; background-color: #55D0DC;">Inline Element</span>
<br>
<br>
<br>
<hr>
2. Check the result with a browser
- Open chapter11.html with a browser.
- First, you can confirm that you can properly set
height,width,padding, andmarginboth horizontally and vertically, while the<span>element (an inline element) is not properly styled vertically. - Second,
height,width,paddingandmarginalso properly work for multiple<img>elements while they do not work properly for<span>elements.
You can also check the sample result here (Demo Site).
<img> and background image
You can also display images as background images, which will be explained in the next chapter. The ways to handle images are different. When you use background images, usually block elements are used as you cannot set height for inline elements. Using background images, you can easily overlay text.
You can also learn this topic offline. Click 
.
More Topics to Explore
justify-content
Chapter 19. Publishing Websites
List Styling Properties
