CSS display and visibility properties

CSS properties display and visibility allow you to hide elements (make them invisible) and completely remove elements from HTML markup (in this case the browser ignores the element when building page layout).

Example of the display property with a value of none
Example of the visibility property with the value hidden
flower

Block and inline elements

Most elements in CSS are classified as block or inline, and this affects how those elements are displayed by default on the web page.

It is important to know to which type the element belongs, because not all CSS properties work with both types of elements. Some CSS properties work only with block elements, others only with inline elements.

The CSS display property allows you to override the default element type. This in turn allows you to change the type of the element from inline to block or from block to inline.

Inline elements

An element defined as an inline will occupy only the necessary amount of space on the web page (the space occupied depends on the contents of the inline element), in addition to these elements:

An inline element can be made blocky if you set the display property to a block value or if the element is made floating. Floating elements automatically become blocky, that is, it becomes possible to adjust the size of the element and set the outer indents.

Block elements

Block elements always start with a new line and occupy the entire available width if the width for the element has not been set. In addition, block elements:

Inline-block elements

The line-block display of the element is specified by the inline-block value. Basically, this is the way to make the element inline, but retain its block features: changing the height and width of the element, adjusting the size of external and internal indents.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      p { display: inline; }	
      span { display: block; }  
	  li { display: inline-block; }
    </style>
  </head>
  <body>
    <p>Paragraph 1.</p><p>Paragraph 2.</p>
    <span>Practical application of the display property we will consider</span>
    <span>in the chapter "CSS Menu"</span>
	<ul>
	  <li>Item 1</li>
	  <li>Item 2</li>
	  <li>Item 3</li>
	</ul>
  </body>
</html>
Try it »

Note: the value of inline-block is not supported in IE7 and earlier versions.

Hide elements

In CSS, you can temporarily or permanently hide some elements of a web page. Note that hidden items will not appear only on the web page, but they can be viewed in the source code of the HTML document. To hide elements, use either the display property with the value none or the visibility property with the value hidden:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      h1.hidden { visibility: hidden; }
      h2.none { display: none; }
    </style>
  </head>
  <body>
    <h1>This is the visible header</h1>
    <h1 class="hidden">Hidden header</h1>
    <h2 class="none">Hidden header 2</h2>
    <p>An element that is hidden using the visibility property still occupies the space
	where it should be, unlike the hidden element using the display property, which is removed
	from the normal document flow.</p>
  </body>
</html>
Try it »
Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011-2018 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen