The display property is used to set how an element should be displayed within the page layout. Values include block, inline, inline-block, and many more. See the CSS Resource on the display property for the full list.

The following discusses the “big 3” of display.

display: block

• Takes up all the horizontal space the element can
• Respects width and height properties
• Respects margin and padding properties

				
					.foo {
    display: block;
}
				
			

display: inline

• Takes up ONLY the horizontal space of the item itself
• DOES NOT respect width and height properties
• DOES NOT respect padding-top and padding-bottom properties
• DOES NOT respect margin-top and margin-bottom properties
• DOES respect padding-left and padding-right properties
• DOES respect margin-left and margin-right properties

				
					.foo {
    display: inline;
}
				
			

display: inline-block

• Takes up ONLY the horizontal space of the item itself
• DOES respect width and height properties
• DOES respect all padding properties
• DOES respect all margin properties

				
					.foo {
    display: inline-block;
}