Layout Display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Demo: Layout Display </title>
<style>
/* h2 (class = head1) is a Block-element, which has been set to "inline" display */
.head1 {
display: inline;
}
/* h2 (class = head2) is a Block-element, which has been set to "inline" display */
.head2 {
display: inline;
}
/* img (class = img1) is a inline-element, which has been set to "block" display */
.img1 {
display: block;
}
/* img (class = img4) is a inline-element, which has been set to "none" display */
.img4 {
display: none ;
}
/* img (class = img6) is a inline-element, which has been set to "hidden" visibility */
.img6 {
visibility: hidden;
}
/* img (class = img9) is a inline-element, which has been set to "block" display */
.img9 {
display: block;
}
</style>
</head>
<body>
<!--
display : property specifies if/how an element is displayed (controlling layout).
display: block;
- element always starts on a new line and takes up the full width available.
display: inline;
- element does not start on a new line and only takes up as much width as necessary.
display: none;
- The element will be hidden, and page will be displayed as if the element is not there
visibility:hidden;
- also hides an element. However, element will still take up same space as before.
-->
<h1>Demo: Layout Display</h1>
<h2 class="head1">Displaying Football Images :</h2>
<h2 class="head2">A total of 9 footballs </h2>
<span> ( Hover mouse on the below images to identify image number )</span>
<div>
<img class="img1" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#1">
<img class="img2" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#2">
<img class="img3" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#3">
<img class="img4" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#4">
<img class="img5" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#5">
<img class="img6" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#6">
<img class="img7" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#7">
<img class="img8" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#8">
<img class="img9" src="/notes/examples/assets/img/football.jpg" alt="football" style="width:10%" title="Image#9">
</div>
</body>
</html>