HTML and CSS Reference
In-Depth Information
What about inline elements?
So you know that block elements flow top to
bottom, with a linebreak in between each element.
Easy enough. What about the inline elements?
Inline elements are flowed next to each other,
horizontally, from top left to bottom right. Here's
how that works.
<p>
Join us
<em>
any evening
</em>
for
these and all our other wonderful
<a href="beverages/elixir.
html" title="Head First Lounge
Elixirs">
elixirs
</a>.
</p>
If
we t
ake th
e inlin
e
c
ontent
of t
his <p>
elem
ent
a
nd flo
w it o
nto th
e page
,
w
e star
t at t
he to
p left
.
p
The inl
ine element
s are laid
next to on
e
anothe
r horizont
ally, as long
as there
is
room o
n the righ
t to place
them.
text
em
text
a
So wh
at if we m
ake the br
owser wind
ow
a littl
e thinner,
or we redu
ce the size
of
the co
ntent area
with the
width prop
erty?
Then
there's less
room to p
lace the in
line
elemen
ts in. Let
's see how
this works.
p
text
em
text
text
a
p
text
em
text
text
text
a
