The display property

The display property is one of the most important when using CSS with XML. This property determines how the element will be displayed on the page. The mail values that this property can assume are the following:

• inline: this is the default value. It places the element in the next available position. There will not be any line breaks between adjacent inline elements. For instance, in our recipe example, the step element is formatted as inline.
• block: in contrast to inline elements, block elements are separated from each other by a line break. In our recipe example, the directions element is displayed as block.
• list-item: it formats the elements as block elements but inserts a bullet at the beginning of the block. In our recipe example, the ingredient element is displayed as list-item. Related properties are list-style-type, list-style-image, and list-style-position.
• table: it formats the elements as part of a table. As an example, the following rules display ingredients using a table instead of a bulletted list. Each ingredient represents a table row and the quantity and component elements are the table columns:

  /* A table for ingredients, where quantity and component are the columns */
  ingredients {
    display: table;
  }
  
  ingredient {
    display: table-row;
  }
  
  quantity, component {
    display: table-cell; 
    text-align: center;
    border-style: solid; 
    border-width: 1pt;
    padding: 5pt;
  }
  

• none: it excludes the displayed element from the rendering. It does not occupy any space or affect the placement of other elements.