What Is The Use Of Display Property In Css

admin_img Posted By Bajarangi soft , Posted On 30-09-2020

The display property is the most important CSS property for controlling layout,The display property specifies if/how an element is displayed,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,An inline element does not start on a new line and only takes up as much width as necessary.

Display Property in Css

1.Display Property in Css

<!DOCTYPE html>
<html>
<head>
    <style>
        li {
            display: inline;
        }
        .ss{
            display:block;
        }
    </style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
    <li><a href="/html/default.asp" target="_blank">HTML</a></li>
    <li><a href="/css/default.asp" target="_blank">CSS</a></li>
    <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

<p>Display a List of links as a vertical menu:</p>
<ul class="ss">
    <li class="ss"><a href="/html/default.asp" target="_blank">HTML</a></li>
    <li class="ss"><a href="/css/default.asp" target="_blank">CSS</a></li>
    <li class="ss"><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>
2.Hide an Element - display:none or visibility:hidden
<!DOCTYPE html>
<html>
<head>
    <style>

        h1.hidden {
            visibility: hidden;
        }
    </style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>
</html>

Related Post