Componenti sulla stessa riga

Questo contenuto viene visualizzato in inglese perché non è ancora disponibile una versione tradotta nella lingua selezionata. Aiutaci a tradurre questo articolo!

Le componenti dell' HTML (Hypertext Markup Language) sono storicamente divise in  "block-level" elements oppure "inline" elements. Le componenti "inline" sono quelle che occupano solo lo spazio delimitato dai tag che definiscono l'elemento nel linguaggio,e non interrompono il flusso del contenuto. In questo articolo esamineremo gli elementi "inline" del linguaggio HTMLed in cosa differiscono dai block-level elements.

Un elemento "inline" non inizia una nuova riga ed occupa strettamente lo spazio necessario

Inline vs. block-level elements: a demonstration

This is most easily demonstrated with a simple example. First, some simple CSS that we'll be using:

.highlight {
  background-color:#ee3;
}

Inline

Let's look at the following example which demonstrates an inline element:

<div>The following span is an <span class="highlight">inline element</span>;
its background has been colored to display both the beginning and end of
the inline element's influence.</div>

In this example, the <div> block-level element contains some text. Within that text is a <span> element, which is an inline element. Because the <span> element is inline, the paragraph correctly renders as a single, unbroken text flow, like this:

Block-level

Now let's change that <span> into a block-level element, such as <p>:

<div>The following paragraph is a <p class="highlight">block-level element;</p>
its background has been colored to display both the beginning and end of
the block-level element's influence.</div>

Rendered using the same CSS as before, we get:

See the difference? The <p> element totally changes the layout of the text, splitting it into three segments: the text before the <p>, then the <p>'s text, and finally the text following the <p>.

Changing element levels

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. For example, even if the display of the span element is changed to "block", it still would not allow to nest a div element inside it.

Conceptual differences

In brief, here are the basic conceptual differences between inline and block-level elements:

Content model
Generally, inline elements may contain only data and other inline elements. You can't put block elements inside inline elements.
Formatting
By default, inline elements do not force a new line to begin in the document flow. Block elements, on the other hand, typically cause a line break to occur (although, as usual, this can be changed using CSS).

List of "inline" elements

The following elements are inline by default (although block and inline elements are no longer defined in HTML 5, use content categories instead):

See also