What is the difference between block and inline elements

This is most easily demonstrated with a simple example. First, some simple CSS that we'll be using:. See the difference? You can change the visual presentation of an element using the CSS display property.

For example, by changing the value of display from "inline" to "block" , you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa. However, doing this will not change the category and the content model of the element. They always start in a new line and have top and bottom margins. It does not contain any other elements next to it.

Examples of Block elements:. Skip to content. Change Language. Related Articles. Table of Contents. Save Article. Improve Article. Like Article. This is the default behavior of inline and block elements. In Example 2, we have reversed the behavior of the elements in the page.

Even though the spans are inline elements, they now stack on top of each other. This is because in the CSS, we set display:block for the spans. As a result, they behave like block-level elements. Also, the divs now line-up side-by-side. This is because in the CSS, we set display:inline.