For working professionals
For fresh graduates
More
1. Introduction
6. PyTorch
9. AI Tutorial
10. Airflow Tutorial
11. Android Studio
12. Android Tutorial
13. Animation CSS
16. Apex Tutorial
17. App Tutorial
18. Appium Tutorial
21. Armstrong Number
22. ASP Full Form
23. AutoCAD Tutorial
27. Belady's Anomaly
30. Bipartite Graph
35. Button CSS
39. Cobol Tutorial
46. CSS Border
47. CSS Colors
48. CSS Flexbox
49. CSS Float
51. CSS Full Form
52. CSS Gradient
53. CSS Margin
54. CSS nth Child
55. CSS Syntax
56. CSS Tables
57. CSS Tricks
58. CSS Variables
61. Dart Tutorial
63. DCL
65. DES Algorithm
83. Dot Net Tutorial
86. ES6 Tutorial
91. Flutter Basics
92. Flutter Tutorial
95. Golang Tutorial
96. Graphql Tutorial
100. Hive Tutorial
103. Install Bootstrap
107. Install SASS
109. IPv 4 address
110. JCL Programming
111. JQ Tutorial
112. JSON Tutorial
113. JSP Tutorial
114. Junit Tutorial
115. Kadanes Algorithm
116. Kafka Tutorial
117. Knapsack Problem
118. Kth Smallest Element
119. Laravel Tutorial
122. Linear Gradient CSS
129. Memory Hierarchy
133. Mockito tutorial
134. Modem vs Router
135. Mulesoft Tutorial
136. Network Devices
138. Next JS Tutorial
139. Nginx Tutorial
141. Octal to Decimal
142. OLAP Operations
143. Opacity CSS
144. OSI Model
145. CSS Overflow
146. Padding in CSS
148. Perl scripting
149. Phases of Compiler
150. Placeholder CSS
153. Powershell Tutorial
158. Pyspark Tutorial
161. Quality of Service
162. R Language Tutorial
164. RabbitMQ Tutorial
165. Redis Tutorial
166. Redux in React
167. Regex Tutorial
170. Routing Protocols
171. Ruby On Rails
172. Ruby tutorial
173. Scala Tutorial
175. Shadow CSS
178. Snowflake Tutorial
179. Socket Programming
180. Solidity Tutorial
181. SonarQube in Java
182. Spark Tutorial
189. TCP 3 Way Handshake
190. TensorFlow Tutorial
191. Threaded Binary Tree
196. Types of Queue
197. TypeScript Tutorial
198. UDP Protocol
202. Verilog Tutorial
204. Void Pointer
205. Vue JS Tutorial
206. Weak Entity Set
207. What is Bandwidth?
208. What is Big Data
209. Checksum
211. What is Ethernet
214. What is ROM?
216. WPF Tutorial
217. Wireshark Tutorial
218. XML Tutorial
The display property in CSS serves as a critical tool in web development, providing an unparalleled level of control over the layout and behavior of HTML elements on a webpage. In this tutorial, we'll delve into the core of this property, enhancing your understanding and practical application of CSS.
This tutorial provides a comprehensive examination of the display property in CSS. We'll delve into its theoretical understanding, practical usage, how to use display property in CSS, and the role it plays in the broader context of web design.
In CSS (Cascading Style Sheets), the display property is used to control how an HTML element is rendered or displayed on a web page. It specifies the type of box used for an HTML element and how it interacts with other elements in the document flow.
Here is an example:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
</style>
</head>
<body>
<h1>The display Property Of CSS</h1>
<h2>display: none:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO upGrad!</p>
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: inline:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO upGrad!</p>
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO upGrad!</p>
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO upGrad!</p>
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
</body>
</html>
The CSS display property defines the display type of an element, thus influencing its layout behavior in the HTML structure. It regulates how an element fits into the overall document flow, as well as its relationship with neighboring elements.
Every HTML element has a default display value, depending on what type of element it is. For instance, the default display value of a 'div' is 'block,' while that of a 'span' is 'inline.' Moreover, setting the display value to 'none' makes the element and its content disappear from the page.
More complex display properties include 'flex' and 'grid,' which allow for intricate, responsive layouts. For instance, the 'display: flex' in CSS makes the element a flexible container, enabling children to adjust their width and height to best fill available space. Similarly, 'display: grid' creates a grid container, in which children can be positioned across rows and columns.
The display property in CSS is a fundamental and powerful property that determines how an HTML element will be displayed on a web page. It essentially controls the layout model for the element, defining its type of box and how it interacts with other elements around it. The display property influences how an element occupies space, flows in the document flow, and interacts with other elements in the document.
Let's dive into the key aspects of how the display property works:
The display property can be set on an element either using inline styles or by defining a CSS rule in a <style> block or an external CSS file. You can target specific elements or use classes and IDs to apply the desired display value to multiple elements.
Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Display Property Example</title>
</head>
<body>
<div class="block-example" style="display: block; background-color: lightblue; padding: 10px;">This is a block-level element.</div>
<span class="inline-example" style="display: inline; background-color: lightgreen; padding: 5px;">This is an inline-level element.</span>
<div class="inline-block-example" style="display: inline-block; background-color: lightcoral; padding: 8px;">This is an inline-block element.</div>
<div class="none-example" style="display: none;">This element has display: none and won't be visible.</div>
<div class="flex-example" style="display: flex; background-color: lightyellow; padding: 10px; justify-content: space-between;">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</div>
<div class="grid-example" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background-color: lightgray; padding: 10px;">
<div>Grid Item 1</div>
<div>Grid Item 2</div>
<div>Grid Item 3</div>
</div>
</body>
</html>
Understanding and effectively utilizing the display CSS property is crucial to mastering web design. It plays a pivotal role in creating responsive designs, an essential skill in today's mobile-first web landscape.
The 'display: flex' property, for instance, provides an efficient way to distribute and align content within an element. With the flexibility to alter the width, height, and order of child elements, designers can create complex layouts that adapt to different viewport sizes.
The 'display: inline-block' property, on the other hand, allows elements to sit side-by-side while maintaining block-like features. This balance makes 'display: inline-block' in CSS a handy tool when designing layouts.
Without a clear understanding of these and other display properties, developers may face challenges in achieving their desired page layout and design.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
p.ex1 {display: initial;}
</style>
</head>
<body>
<h1>The display default Property</h1>
<h2>display: initial:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
<p class="ex1">HELLO upGradTutorial!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
</body>
</html>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Display Properties</title>
<style>
.displayElements{
display: inline;
width: 60%;
height: 70%;
margin: 70px;
}
#div1{
background-color: green;
display: inline;
height: 60px;
}
#div2{
background-color: lightcoral;
display: inline;
height: 40px;
}
#div3{
background-color: purple;
display: inline;
height: 80px;
}
</style>
</head>
<body>
<div class="displayElements">
<div id="div1">upGradTutorial I</div>
<div id="div2">upGradTutorial II</div>
<div id="div3">upGradTutorial III</div>
</div>
</body>
</html>
CSS display inline-block
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Display Properties</title>
<style>
.displayElements{
display: block;
width: 30%;
height: 70%;
margin: 70px;
}
#div1{
background-color: lightseagreen;
display: inline-block;
height: 80px;
}
#div2{
background-color: yellow;
display: inline-block;
height: 80px;
}
#div3{
background-color: mediumvioletred;
display: inline-block;
height: 80px;
}
</style>
</head>
<body>
<div class="displayElements">
<div id="div1">upGradTutorial I</div>
<div id="div2">upGradTutorial II</div>
<div id="div3">upGradTutorial III</div>
</div>
</body>
</html>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Display Properties</title>
<style>
.displayElements{
display: block;
width: 60%;
height: 70%;
margin: 70px;
}
#div1{
background-color: green;
display: block;
height: 80px;
}
#div2{
background-color: pink;
display: block;
height: 80px;
}
#div3{
background-color: yellow;
display: block;
height: 80px;
}
</style>
</head>
<body>
<div class="displayElements">
<div id="div1">upGradTutorial I</div>
<div id="div2">upGradTutorial II</div>
<div id="div3">upGradTutorial III</div>
</div>
</body>
</html>
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p {color:mediumseagreen;}
p.ex1 {display: run-in;}
</style>
</head>
<body>
<h1>The display run-in Property in upGradTutorial</h1>
<h2>display:run-in:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
<p class="ex1">HELLO upGradTutorial!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
</body>
</html>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Display Properties</title>
<style>
.displayElements{
display: block;
width: 60%;
height: 70%;
margin: 70px;
}
#div1{
background-color: red;
display: block;
height: 80px;
}
#div2{
background-color: pink;
display: none;
height: 80px;
}
#div3{
background-color: yellow;
display: block;
height: 80px;
}
</style>
</head>
<body>
<div class="displayElements">
<div id="div1">upGradTutorial I</div>
<div id="div2">upGradTutorial II</div>
<div id="div3">upGradTutorial III</div>
</div>
</body>
</html>
inline-flex: It is used for displaying an element as an inline-level flex container.
inline-grid: It is used for displaying an element as an inline-level grid container.
inline-table: It is used for displaying an inline-level table.
list-item: It is used for displaying all the elements in an <li> element as list items.
run-in: It is used for displaying an element either inline or block level, depending on the context.
table: It is used to set the behavior as a <table> for all elements.
table-caption: It is used to set the behavior as a <caption> for all elements.
table-column-group: It is used to set the behavior as a <column> for all elements.
table-header-group: It is used to set the behavior as a <header> for all elements.
table-footer-group: It is used to set the behavior as a <footer> for all elements.
table-row-group: It is used to set the behavior as a <row> for all elements.
table-cell: It is used to set the behavior as a <td> for all elements.
table-column: It is used to set the behavior as a <col> for all elements.
table-row: It is used to set the behavior as a <tr> for all elements.
none: It is used to eliminate the element, making it not display.
initial: It is used to set the property to its default value.
inherit: It is used to inherit a property from its parent element.
Mastering the display property in CSS is an indispensable part of any web developer's toolkit. With this comprehensive understanding, you can leverage the display property to manipulate HTML elements and achieve your desired webpage design. To further expand your web development skills, consider the specialized courses offered by upGrad.
The display property in CSS can take various values, including 'block,' 'inline,' 'none,' 'flex,' and 'grid.' Each of these values has a unique impact on the layout behavior of the HTML element.
The 'display: block' property in CSS makes the element behave like a block-level element, forcing a line break before and after the element. This can be helpful in creating sections of content in your webpage design.
Sure, here's an example with 'display: flex'. When you set an element's display property to 'flex', you can use additional properties like 'justify-content,' 'align-items,' and 'flex-direction' to control the layout of the element's children.
The 'display: flex' property in CSS allows for flexible layouts that adapt to different screen sizes. It provides control over the alignment, order, and size of child elements, making it invaluable in responsive design.
Author
Talk to our experts. We are available 7 days a week, 9 AM to 12 AM (midnight)
Indian Nationals
1800 210 2020
Foreign Nationals
+918045604032
1.The above statistics depend on various factors and individual results may vary. Past performance is no guarantee of future results.
2.The student assumes full responsibility for all expenses associated with visas, travel, & related costs. upGrad does not provide any a.