Everything about css display property

CSS Display properties.

These are the most important and most used properties.
display:none;
To hide a content or element use this property.
This property will hide the content or element.
It doesn't delete the content, it just hide the content.
display:inline;
This value shows or displays the elements in a single line.
display:block;
This value convert a element into a block or we can say the element will work like div.
display:inline-block;
This will convert the elements into a block and
then displays or shows in a single line.
display:list-item;
If we use this value then the element will
work like a list item.
display:flow-root;
Suppose we have a div and inside that div we have another div means child div. So when we use float property on the child div then a issue creates.The issue is the parent div doesn't close properly. It close on the upper side of the child and it looks like that the child div is outside of the parent div. We will use display:flow-root on the parent div if we use float property on the child div.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    #ul_list {
        display:none;
    }
    #ol_lsit_1 li{
        border:solid 5px black;
    display:block;
    }
    #ol_lsit_2 li{
        border:solid 5px black;
        display:inline;
    }
    #ol_lsit_3 li{
        border:solid 5px black;
        display:inline-block;
    }
    span{
        border:solid 5px red;
        display:list-item;
    }
</style>
</head>
<body>

    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
    <ol id="ol_lsit_1">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ol>
<ol id="ol_lsit_2">
    <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ol>
    <ol id="ol_lsit_3">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ol>
<span>A</span>
<span>B</span>
<<span>C</span>
<span>D</span>

</body>
</html>

CSS visibility property

This property is used to hide or unhide a element. But if we use display:none; property to hide a element then other element will come to that place of the hidden element. But for visibility property, any other element never come to that place of the hidden element. We will see a empty place if we use visibility.
Properties of visibility:
visibility: visible;
visibility: hidden;

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    .A{
        height:150px;
        width:150px;
        border: 5px solid red;
        background-color:gray;
        position:absolute;
        left:5%;
    }
    .B{
        height:150px;
        width:150px;
        border: 5px solid green;
        background-color:pink;
        position:absolute;
        left:15%;
        display:None;
    }
    .C{
        height:150px;
        width:150px;
        border: 5px solid red;
        background-color:gray;
        position:absolute;
        left:5%;
        visibility: hidden;
    }
</style>
</head>
<body>

<div class="A">Div 1</div>
<div class="B">Div 2</div>
<div class="C">Div 3</div>
</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us