Online: 6744
Online: 6744
Online: 6744
The display property affects the most basic presentation of an element, effectively classing the element as a certain type of element. The rendering of the element may depend heavily on its display type, and certain properties will only work on elements that have specific display values.
There are different display properties they are
It creates the text in the line
<style>
.class1{
display:inline;
}
</style>
</head>
<body>
<p class="class1">TechFunda</p>
<p class="class1">is </p>
<p class="class1">online website </p>
<p class="class1">Step by step</p>
<p class="class1">procedure </p>
</body>
In the above code snippet we have display property as inline which creates text in the line
output
It creates text in the vertical line
<style>
.class1{
display:block;
}
</style>
</head>
<body>
<h2><i>Display block creates text in vertical line</i></h2>
<p class="class1">TechFunda</p>
<p class="class1">is </p>
<p class="class1">online website </p>
<p class="class1">Step by step</p>
<p class="class1">procedure </p>
</body>
In the above code snippetg we have display :block which creates text in vertical line
output
It selects the selected list to change values
<style>
.s {
background-color:green;
display:list-item;
}
</style>
</head>
<body>
<h2><i>Display list item selects the selected list </i></h2>
<p class="s">TechFunda</p>
<p>is </p>
<p>online website </p>
<p>Step by step</p>
<p>procedure </p>
</body>
In the above code snippet we have .s style element with values and .s is given to the paragraph (p) element which changes the color of the p tag
output
Display property does not show value which is present in it
<style>
.s {
display:none;
}
</style>
</head>
<body>
<h2><i>Display list item selects the selected list </i></h2>
<p class="s">TechFunda</p>
<p>is </p>
</body>
In the above code snippet we have display property:none in the .s and we have given the s in the p tag using class, displays no value in the output
output
