CSS display Property
The display property specifies the display behavior (the type of rendering box) of an element.
>- The display property sets an element's inner and outer display types.
- The Display property defines how the components will be placed on the web page.
<!DOCTYPE html>
<html>
<head>
<title> Links</title>
<link rel=" shortcut icon" href=" favicon.png" >
<link rel=" stylesheet" href=" style.css" >
</head>
<body>
<div>
<p>
Hi..its me < span class="">Syamraj R< /span>
</p>
</div>
</body>
</html>
Different display values with output
- inline - It is used to display an element as an inline element.
- block - It is used to display an element as a block element.
- flex - It is used to display an element as a block-level flex container.
- grid- It is used to display an element as a block-level grid container.
- inline-block - It is used to display an element as an inline-level block container.
- inline-flex- It is used to display an element as an inline-level flex container.
- inline-grid - It is used to display an element as an inline-level grid container.
- block-grid- It is used to display an element as a block-level grid container.
- none - It is used to remove the element.
- table - Let the element behave like a < table> element.
- initial - It is used to set the default value.
- inherit - It is used to inherit the property from its parent's elements.
- table-cell - It is used to set the behavior as
for all elements .table-cell {display: table-cell;border: 1px solid red}
- table-column - It is used to set the behavior as
for all elements. .table-column {display: table-column;border: 1px solid red}
Sample Programme Source code:
Introduction to CSS Part-2 PDF Click here to download
Easy Pickup
- 1. CSS More Samples
- 2. CSS Malayalam Classes
- 3. CSS Malayalam Notes
SYAMRAJ R
Founder and Developer of Mallu Coder Sugu.We provide the best Computer or Programming Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners.
- table-column - It is used to set the behavior as
.inline {
display: inline;
border: 1px solid red
}
.inline {
display: block;
border: 1px solid red
}
.inline {
display: flex;
border: 1px solid red
}
.grid {
display: grid;
border: 1px solid red
}
.inline-block {
display: inline-block;
border: 1px solid red
}
.inline-flex {
display: inline-flex;
border: 1px solid red
}
.inline-grid {
display: inline-grid;
border: 1px solid red
}
.block-grid {
display: block-grid;
border: 1px solid red
}
.none {
display: none;
border: 1px solid red
}
.table {
display: table;
border: 1px solid red
}
.initial {
display: initial;
border: 1px solid red
}
.inherit {
display: inherit;
border: 1px solid red
}