CSS Display and Visibility

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

h1.hidden {visibility:hidden;}

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there:

h1.hidden {display:none;}

CSS Display - Block and Inline Elements

A block element is an element that takes up the full width available, and has a line break before and after it.
Examples of block elements:

<h1>

<div>

An inline element only takes up as much width as necessary, and does not force line breaks.
Examples of inline elements:

<span>

Changing How an Element is Displayed

The following example displays list items as inline elements:

li {display:inline;}

The following example displays span elements as block elements:

span {display:block;}

<html>

<head>

h1 {display:inline;}

</style>

</head>

<body>

<h1 >This is a visible heading</h1>

<h1 >This is a hidden heading</h1>

<p>Notice that the hidden heading does not take up space.</p>

</body>

</html>

Garima Infotech Solution

Saturday, 8 April 2017