Program:
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS DISPLAY</title>
<style>
body {
font-family: "Comic Sans MS", sans-serif;
}
div {
padding: 10px;
margin: 10px;
}
h3 {
display: inline;
}
span {
display: block;
}
a {
display: block;
}
input {
display: block;
}
h1 {
visibility: hidden;
}
</style>
</head>
<body>
<!-- DISPLAY INLINE -->
<div>
<h3>HTML</h3>
<h3>CSS</h3>
<h3>JavaScript</h3>
<h3>JQuery</h3>
<h3>Bootstrap</h3>
</div>
<!-- Display Block -->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span>1. At aut beatae cum cumque dolore exercitationem facere in ipsum itaque, </span>
<span>2. iure libero maiores minus nisi odio sed temporibus totam veniam! Consequuntur!</span>
<span>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
At aut beatae cum cumque dolore exercitationem facere in ipsum itaque,
iure libero maiores minus nisi odio sed temporibus totam veniam! Consequuntur!
</p>
</div>
<!-- DISPLAY BLOCK -->
<div>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact Us</a>
<a href="#">Careers</a>
</div>
<!-- DISPLAY BLOCK -->
<div>
<form>
<input type="text" placeholder="User Name">
<input type="password" placeholder="Password">
<input type="submit">
</form>
</div>
<!-- DISPLAY NONE / HIDDEN -->
<div>
<h1>I am Hidden</h1>
</div>
</body>
</html>
Output:
