Display Properties

Every HTML element falls into a display family such as block, inline or replaced (which refers to elements such as form fields and media inserted by the browser).

The display property allows the designer to change the native behaviour of an element.

A common example relates to navigation bars and HTML lists created with the <ul> and <li> elements. The <li> is natively a block element but with display it can be changed to an inline element with a rule as follows:

li{
    display:inline;
}

By creating a rule like this the <li> elements will now flow from left to right rather than top to bottom. This means the list becomes horizontal rather than vertical. See Horizontal Menus from Humble HTML Lists for a demonstration of this trick.

The display property can (amongst other things) be used to do the following:

inline
makes the element act as inline even if it is by default a block element.
li{
     display:inline;
}
block
makes the element act as block even if it is by default an inline element.
img{
     display:block;
}

Note: By making an element inline you will not be able to access box model properties such as width, height, margin and padding

Flexbox and Display - 'flexing rather than flowing'

Modern browsers support the display property of flex. This converts the element to what is known as a flex container. Immediate child elements inside that container are now known as flex items and how they flow in the container can be controlled. This is great for creating layouts.

For example here is a simple pair of nested <div> tags. Both the <div> elements of class content and sidebar are children of the <div> of class main.

<div class="main">
	<div class="content">
		<h2>The Main Content</h2>
		<p>The main content here.</p>
	</div>
	<div class="sidebar">
		<h2>The side bar</h2>
		<p>Some related interesting information in here.</p>
	</div>	
</div>

As such we could give main a display property of flex to make it a flex container.

.main{
     display: flex;
}

Now content and sidebar will 'flex' in their parent container rather than 'flowing' down the page and the sidebar appears over to the right hand side.

View Demo

Flexbox is a relatively new CSS concept and does a lot more than the above. Take a look at this post to dig deeper.

Tip: The nature of this guide is to give you 20 CSS properties to get you started. You will find lots of sites using layout techniques based around float. We'll look at float later but I'm recommending flexbox for new starters as it has solid browser support that will only grow over time, and it is a much easier way to layout pages than the likes of float.

Other useful display properties

There are a number of other display properties that it is useful to be aware of.

none
results in the element not been displayed – ie hides it! This is particularly useful when CSS is used with Javascript) to create interactive pages and with print friendly pages.
.hide{
     display:none;
}

list-item – makes non-list elements act like a list.

.list{
      display:list-item;
}
inline-block
displays the element as inline but allows access to the box model properties of width, height, margin and padding.
ul.menu li{
     display:inline-block;
     width: 120px;
}

The above makes list items inline but all of the same width.

Unfortunately display: inline-block is not supported by IE7. The following amended code uses the 'has layout' hack to enable display: inline-block for IE7. When using this hack take care to remove all unneeded whitespacing as it will be rendered.

ul.menu li{
    display:inline-block;
    width:120px;
    /* hack for ie7
    zoom: 1;
    *display:inline;
}

Leave a Comment