CSS Introduction | CSS Position Properties | Display

Tags:

CSS Display

The display property is one of the important CSS properties that determines the layout of a web page. This property determines when and how the corresponding HTML element appears in the web browser.

Most HTML elements have one of the following two values as the default value of the display property.

  1. Block
  2. Inline

Block

An element whose display value is block always starts on a new line and occupies the full width of that line.

The <div>, <h1>, <p>, <ul>, <ol>, and <form> elements are representative block elements.

Inline

An element whose display value is inline does not start on a new line. Its width also occupies only as much space as the content of the HTML element, not the full line.

The <span>, <a>, and <img> elements are representative inline elements.

Changing the Default display Value

Every HTML element has its own default display value.

However, you can change an element whose display value is block to inline. Conversely, you can also change an element whose display value is inline to block.

By changing the display value of an HTML element in this way, you can modify the web page into the shape you want.

<style>
    li { display: inline; }
</style>

In the example above, the display value of the block element <li> is changed to inline. The <li> element whose display value is changed to inline loses the block element characteristic of occupying the full width of the line.

Changing the display value does not actually turn the element into a completely different type of element. For example, even if the display value is changed from inline to block, the changed element cannot contain other elements inside it. This is because only elements whose display value is block from the beginning can contain other elements.

Inline-Block

In addition to inline and block, inline-block is a commonly used value for the display property. An element whose display value is set to inline-block behaves like an inline element itself. However, inside that element, it behaves like a block element.

An inline-block element is similar to an inline element, but you can set its width and height. You can also set spacing with margin like a block element.

The following example shows how various display values behave.

<style>
    div { width: 100px; height: 50px; }
 
    .first { background-color: aqua; }
    .second { background-color: green; }
    .third { background-color: yellow; }
 
    .inline { display: inline; }
    .inline-block { display: inline-block; }
</style>

As in the example above, elements whose display value is set to inline-block line up in one line like inline elements. However, their width and height can be set like block elements. Therefore, this value is often used when creating website menus or navigation bars.

visibility Property

The visibility property only determines whether an HTML element is displayed on the web page. Therefore, even if it does not appear on the web page, it still exists in the layout and naturally remains in the code. Using the visibility property with JavaScript makes it easy to create very complex menus or layouts.

The available values for the visibility property are as follows.

  1. visible: Displays the HTML element on the web page.
  2. hidden: Does not display the HTML element on the web page, but it still exists in the page layout.
  3. collapse: This value can be used only in dynamic tables and shows only one line of the table border.

Hiding HTML Elements

To hide an HTML element, set the display property value to none. This makes the element no longer appear on the web page and no longer affect the page layout.

You can also hide an HTML element by setting the visibility property value to hidden. Unlike setting display to none, however, the element is only not visible and still exists in the page layout.

<style>
    p.none { display: none; }
    p.hidden { visibility: hidden; }
</style>

Therefore, it is not appropriate to hide sensitive or valuable data with the visibility property.

opacity Property

With the opacity property, you can easily adjust the transparency of an HTML element. The opacity value can be set from 0.0 to 1.0, and the closer the value is to 0, the more transparent the element becomes.

Internet Explorer 8 and earlier use the following syntax to represent transparency.

Syntax

filter:alpha(opacity=x)

The x value can be set from 0 to 100, and the closer the x value is to 0, the more transparent the element becomes.

The following example correctly represents transparency in most web browsers as well as Internet Explorer 8 and earlier.

<style>
    img { opacity: 0.4; filter: alpha(opacity=40); }
    img:hover { opacity: 1.0; filter: alpha(opacity=100); }
</style>