This property defines how a HTML element will be displayed i.e whether it will occupy a full end to end space or it will occupy the space it needs or will be displayed as a table or a list-item.
The most important display values to be considered are: inline, inline-block, block, table & table-cell, none and flex.
Display Inline, Block and Inline-Block
In the basic html elements webpage activity, where we built a page with all the basic HTML elements, the elements like paragraph (<p></p>), division (<div></div>) etc starts from a new line and occupies the entire block space unlike elements like span (<span></span), anchor (<a></a>) which occupies the space needed for itself. The paragraph, division, table, lists are the block elements i.e by default their display property value is block and the elements like span, anchor, strong etc are the inline elements i.e. their display property is inline by default.
Revisit the activity and see the difference between inline and block HTML elements.
To get more clarity about this, let us do below activities with this example as shown below:
Example: This page contains 2 paragraphs and 2 span texts as shown below:
 |
| Image 2.4.1 Example for display inline, block and inline-block |
The paragraph 1 & 2 starts from the next line as they are the block elements and span texts aligns themselves one after another.
Activity1: To make the p tag inline. The output would be:
 |
| Image 2.4.2 Activity 1: Making the paragraph, inline element |
Activity 2: Try to give width and height to the inline paragraph now. For instance: width:100px, height:100px. This is not going to make any difference as we cannot give width or height to an inline element
Activity 3: Make the span block element. The output would be:
 |
| Image 2.4.3 Activity 3: Making span, a block element |
Activity 4: Now, let us give this span some width and height. I am giving 20% width and 30px height as the height in percentage was looking weird 👀. The output would be:
 |
| Image 2.4.4 Activity 4: Adding width, height to the block element |
Activity 5: Let us change the paragraph from inline to inline-block and the output will be:
 |
| Image 2.4.5 Activity 5 Inline-Block Paragraph |
This is the difference between display inline, block and inline-block and the above were the use-cases (the output can be considered the use cases)
Note: This lorem ipsum text in this example is a dummy text used while designing a web page as a general practice. I have taken this text from here.
Display table & table-cell
This property is used to design the layout in tabular form.
Suppose, we want a tab like below:
 |
| Image 2.4.6 CSS Tab |
This can be easily achieved by display table and table-cell. Tab One, Tab Two, Tab Three & Tab Four are the list of the options available for the user to select so, the HTML code and the initial output would be like:
 |
| Image 2.4.7 HTML Code for the CSS tab |
To make this list look like that seen in the Image 2.4.6, we have to make the ul to be displayed like a table and li to be displayed like the table cells. So, the CSS for that and the output would be:
 |
| Image 2.4.8 Display table and table-cell |
Now, let us give ul some width and background-color along with height. The output will be:
 |
| Image 2.4.9 Adding width and height to table & table-cell |
To align the text vertically in the middle, there is a property called vertical-align that can be used with table-cell. Also, I would like to give a left border to the li so that we will be able to see how the lists are divided here.
 |
| Image 2.4.10 Vertically aligning table-cell text in the middle |
Now, let us align the text horizontally in the center as it will make more sense. For that, the property used is text-align:center as below:
 |
| Image 2.4.11 Horizontally aligning the text in the center |
Here, the tab three, has more width than the other tabs as by default the tabs are provided width according to the length of the inner text. To provide equal width we can use table-layout:fixed CSS property as below:
 |
| Image 2.4.12 Table-Layout property |
Display table and table-cell makes easier to develop such layout elements which a html table (<table></table>) cannot do.
Display: flex
Display flex is used whenever there is a need to build a layout where 2 adjacent boxes must have same heights irrespective of the content inside. This display property is not supported by internet explorer. The browser compatibility for any css property can be checked from caniuse.com.
Example: Suppose we are making a website for skin care products and there is a section which shows foam cleansers vs oil cleansers, we can use display flex property to represent this in a beautiful manner as below:
Here, irrespective of the content, the height of boxes are maintained equal. Let's see how to develop this
The html code for this will be:
<div class="divProductsWrapper">
<div class="divProduct">
<h2>Foam Cleanser</h2>
<img src="C:\Users\ASUS\Desktop\foam-cleanser.png"/>
<p>Foam cleansers create a foamy lather (hence the name), and are ideal for removing oil, layers of makeup and even hard-to-wash-off sunscreen</p>
</div>
<div class="divProduct">
<h2>Oil Cleanser</h2>
<img src="C:\Users\ASUS\Desktop\oil-cleanser.png"/>
<p>Oil Cleansers work on an ‘oil attracts oil’ basis, absorbing impurities and nourishing the skin</p>
</div>
</div>
CSS would be:
Note: Download below images, save these images locally and replace the image path in src
Display: none
This property hides a HTML element as if it is not there on the webpage. Inspect this blog or any of the website and set display:none to any of the element to check this property.