HTML and CSS Reference
In-Depth Information
Figure 16-2.
Block and inline elements
The boxes surrounding inline and block elements have different features. A block
element can manipulate all properties in the box model, including the width and height
of the content area, as well as the border, padding, and margin. If no width is set, a block
element expands horizontally to the maximum allowed by the containing element.
An inline element is more limited in that it cannot set the vertical margins (top or
bottom). It also cannot change the width or height of its inline box. For an inline element,
the minimum height can be set with the
line-height
property, but the width and height
adjust automatically to fit the content that the element holds.
There is a subcategory of inline elements, called replaced inline elements, that
use external objects such as
<img>
,
<video>
, and
<object>
; and form elements such
as
<input>
and
<textarea>
. With these inline elements, all box properties can be
manipulated the same way as block elements.
Span and div
Using the
<span>
and
<div>
elements is a generic way of adding structure to a web document.
These elements have no styles associated with them, which makes them especially well-suited
to work with class and id selectors. The difference between the two is that
<span>
is an inline
element whereas
<div>
is a block element.
<span>Inline</span>
<div>Block</div>
As an inline element,
<span>
is mainly used to add styling to sections of text. It cannot
be used for styling block elements because such elements are not allowed inside of inline
elements according to the HTML specification.
<span style="color: red;">Red text</span>
In contrast,
<div>
is used to create styled containers for other block and inline elements.
These custom containers are often what make up the layout of a web page. Because it is
a block element,
<div>
allows all the element's box attributes to be manipulated (width,
height, padding, border, and margin).
<div class="a">
<div class="b">Block within a block</div>
</div>
