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.
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
.
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>
You can also check the sample result here (Demo Site ).
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>
text-align
works for the <img>
element.You can also check the sample result here (Demo Site ).
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.
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>
height
, width
, padding
, and margin
both horizontally and vertically, while the <span>
element (an inline element) is not properly styled vertically.height
, width
, padding
and margin
also 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 ).
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.
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.
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
.
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>
You can also check the sample result here (Demo Site ).
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>
text-align
works for the <img>
element.You can also check the sample result here (Demo Site ).
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.
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>
height
, width
, padding
, and margin
both horizontally and vertically, while the <span>
element (an inline element) is not properly styled vertically.height
, width
, padding
and margin
also 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 ).
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.