HTML ( Hypertext Markup Language ) elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the 流式布局 . Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content. In this article, we'll examine HTML inline-level elements and how they differ from 块级元素 .
An inline element does not start on a new line and only takes up as much width as necessary.
This is most easily demonstrated with a simple example. First, some simple CSS that we'll be using:
.highlight {
background-color:#ee3;
}
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>
在此范例中，
<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:
For looks, this CSS (not displayed in standard reading mode) is also used:
body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color:#ee3;
}
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>
The CSS (not displayed in standard reading mode) is also used:
body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color:#ee3;
}
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>
.
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
和
content model
of the element. For example, even if the
display
的
span
element is changed to
"block"
, it still would not allow to nest a
div
element inside it.
In brief, here are the basic conceptual differences between inline and block-level elements:
Generally, inline elements may contain only data and other inline elements. You can't put block elements inside inline elements.
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).
The following elements are inline by default (although block and inline elements are no longer defined in HTML 5, use content categories instead):
<a>
<abbr>
<acronym>
<audio>
(if it has visible controls)
<b>
<bdi>
<bdo>
<big>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<map>
<mark>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<tt>
<var>
<video>
<wbr>