HTML and CSS Reference
In-Depth Information
of text, whereas block elements cause line breaks before and after. This
visual presentation can also be controlled by
CSS
through the
display
property by setting the value to either
inline
or
block
.
A simple example will illustrate the key differences. Here are three
<div>
elements:
<div>1</div> <div>2</div> <div>3</div>
The following styles show the elements' position and shape:
div {
width: 2.5em;
height: 2.5em;
margin: 0.5em;
padding: 0.5em;
border: 5px dashed black;
}
Setting the
display
property to
block
causes all
three elements to sit on a line by themselves,
each with the width, height, padding, and mar-
gin specified:
div { display: block; }
Of course, a
<div>
element is
display: block
by
default, so explicitly stating it in
CSS
isn't nec-
essary.
Setting the
<div>
elements to
display: inline
has a drastic effect:
div { display: inline; }
Not only are the elements now sitting on the
same line, but they're considerably smaller.
This is because the
width
and
height
properties
don't apply to inline elements, so each
<div>
is
now the size of its content plus the margin
specified.