Scribd
Upload
9 views5 pages

Display

Uploaded by

anjalivishwakarma3343new
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views5 pages

Display

Uploaded by

anjalivishwakarma3343new
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Display

This property is used to define how an element should display. Every HTML element has a default display value
depending on what type of element it is. The default display value for most elements is block or inline.

• inline • table-row-group
• block • table-caption
• flex • table-column-group
• inline-block • table-header-group
• inline-flex • table-footer-group
• inline-table • table-cell
• list-item • table-column
• run-in • table-row
• table • none
Display
Block-level Elements - A Block-level element always starts on a new line and takes up the full
width available.
Ex: -
<div>
<h1>
<p>

Inline Elements - An inline element does not start on a new line and only takes up as much width
as necessary.
Ex: -
<span>
<a>
<img>
Display
• inline • table-row-group
• block • table-caption
• flex • table-column-group
• inline-block • table-header-group
• inline-flex • table-footer-group
• inline-table • table-cell
• list-item • table-column
• run-in • table-row
• table • none

p { display: inline; }
Display
• inline – When we set this value, the element does not start on a new line and
only takes up as much width as necessary (we can’t set width/height it won’t
work)
• block – When we set this value, element always starts on a new line and takes
up the full width available (we can set width/height)
• inline-block – It is combination of inline and block value. It doesn’t start on new
line but we can set width and height.
• none - The element will not be displayed at all (has no effect on layout)
• flex - Displays an element as a block-level flex container.
• inline-flex - Displays an element as an inline-level flex container.
• inline-table - The element is displayed as an inline-level table
• run-in - Displays an element as either block or inline, depending on context
Display
• table – It works like a <table> element
• table-caption - It works like a <caption> element
• table-column-group - It works like a <colgroup> element
• table-header-group - It works like a <thead> element
• table-footer-group - It works like a <tfoot> element
• table-row-group - It works like a <tbody> element
• table-cell - It works like a <td> element
• table-column - It works like a <col> element
• table-row - It works like a <tr> element
• list-item - It works like a <li> element

You might also like