CSS Visibility vs Display

CSSWeb DevelopmentFront End Technology

All HTML elements have a default display value set and can be overridden with CSS Display property, likewise visibility of all elements is set to visible as a default but this also can be overridden with CSS Visibility property.

Following are the values for CSS Display property −

Sr.NoValue & Description
1inline
It displays an element as an inline element (like <span>), height and width properties will have no effect if defined
2block
It displays an element as a block element (like <div>) and forces a line break
3contents
It makes the container disappear, making the child elements children of the element the next level up in the DOM
4flex
It displays an element as a block-level flex container
5grid
It displays an element as a block-level grid container
6inline-block
It displays an element as an inline-level block container. The element itself is formatted as an inline element, but height and width values can be applied
7inline-flex
It displays an element as an inline-level flex container
8inline-grid
It displays an element as an inline-level grid container
9inline-table
The element is displayed as an inline-level table
10list-item
It lets the element behave like a <li> element
11run-in
It displays an element as either block or inline, depending on context
12table
It lets the element behave like a <table> element
13table-caption
It lets the element behave like a <caption> element
14table-column-group
It lets the element behave like a <colgroup> element
15table-header-group
It lets the element behave like a <thead> element
16table-footer-group
It lets the element behave like a <tfoot> element
17table-row-group
It lets the element behave like a <tbody> element
18table-cell
It lets the element behave like a <td> element
19table-column
It lets the element behave like a <col> element
20table-row
It lets the element behave like a >tr< element
21none
The element is not rendered on the page
22initial
It sets this property to its default value.
23inherit
It defines that display property of element is taken from its parent element.

Let’s see an example of CSS display inline-block −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>CSS Display Inline-Block</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
input[type="button"] {
   border-radius: 10px;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Display-Inline-Block</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>

Output

Following are the values of CSS Visibility property −

Sr.NoValue & Description
1visible
It is default, element and its children are visible
2hidden
It hides the element and its children are invisible, but element is still rendered and given appropriate space on the page
3collapse
It is used only for table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>). This value removes a row or column, and space taken up by the row or column will be available for other content
If used on other elements, it renders as ‘hidden’
4initial
It sets the visibility of the element to its default value
5inherit
It specifies that the value of the visibility property should be inherited from the parent element

Let’s see an example of CSS Visibility property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility collapse</title>
<style>
form ,table{
   width:70%;
   margin: 0 auto;
   text-align: center;
}
table, th, td {
   border-collapse: collapse;
   border: 1px solid black;
}
thead {
   background-color: goldenrod;
}
tbody{
   background-color: khaki;
}
tr:nth-of-type(3){
   visibility: collapse;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-collapse</legend>
<table>
<thead>
<tr><th>Name</th><th>Course</th></tr>
</thead>
<tbody>
<tr><td>Joana</td><td>MBA</td></tr>
<tr><td>Smith</td><td>B.Arc</td></tr>
<tr><td>Xersus</td><td>M.Sc</td></tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>

Output

CSS Visibility collapse is not applied −

CSS Visibility collapse is applied −

raja
Published on 06-Jan-2020 11:30:57
Advertisements