Box generation and display property

There are two main ways of elements appearance in a document tree; that are block-level elements and inline-level elements.

Block-level elements are these elements that appear formatted as blocks with paragraphs and div elements as the most common examples.

These block-level elements, upon being rendered, generate a principle block-level box that contains descendant boxes and other generated content.

Inline level elements are those that, upon being rendered, do not generate any new boxes but the content is being distributed in lines. Such elements are used for emphasizing certain text within a paragraph or inserting images, hyperlinks etc...

Inline elements generate inline-level boxes but also other elements that don't belong to inline-elements such as inline-table elements or inline-block elements. Such, non-typical, inline-level boxes are called atomic inline-level boxes; that is because such a box does participate in the inline formatting context as a single box.

Display property

To assign a box type to an element, the display property is used. This property does not change the default element's box type, it just changes the way that particular element displays on a page.

The display property contains following information:

value: inline, block, list-item, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none or inherit;
initial: inline;
applies to: all elements;
inherited: no;
percentages: N/A;
media: all;
computed value: as specified.

The block and the inline value types cause an element to generate a block box and an inline box (or more) respectively.

The inline-block generates an inline-level block container; the element itself is formatted as an atomic inline-level box.

The list-item value causes an element to generate a principle block box and a marker box (used mostly on lists, let say a <li> element).

The values table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table row, table-cell and table-caption cause an element to behave like a table element.

The vastly used none value makes an element and all of its descendants disappear from the elements flow in the document. This property does not make element invisible, it actually removes it completely from the page resulting with no affect on the layout whatsoever. To make an element invisible but affecting the document's layout please refer to the property called visibility.

The values defining the block-level boxes are block, list-item and table while those that define inline-level boxes are inline, inline-table and inline-block.

The computed value is the same as the specified value except for the positioned and floated elements, as well as the root element.

An important note is that only value inline, block and none are commonly used. The other display types might have issues with older browsers.

There are special situations regarding a box generation and they are called anonymous block and inline boxes. To learn more about them, please go to the "CSS Advanced section".

Example

CSS display property example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
div {
	display:block;
	margin: 10px 5px;
	border:2px dashed #222;
}
p {
	display:inline;
	margin-left:5px;
	background-color:yellow;
}
div > div {
	border:1px dashed #999;
	margin:10px; 
	padding:3px;
}
</style>
</head>

<body>

<div>
	<p>Paragraph#1</p>
	<p>Paragraph#2</p>
	<p>Paragraph#3</p>
	<div>Although paragraphs by default are block type elements we changed that characteristics by defining the <i>display:inline</i> on them so they appear one after the other.<br />
	On the other hand the following box with this text inside is a &lt;div&gt; and it is being rendered as a block without the property being specified</div>
</div>

</body>
</html>

›› go to examples ››

Box generation and display property

Display property

Example

CSS display property example:

Comments

About

Contact

Get Connected