HTML and CSS Reference
In-Depth Information
borders
. If the
inline-block
element is embedded in text, a browser aligns the
baseline of its bottom line of text with the baseline of the parent's text. Exam-
ple 3.23 illustrates this relationship.
Example 3.23: HTML and CSS coding for
inline-block
elements
<!DOCTYPE html>
<html>
<head>
<title>Example 3.23</title>
<style type="text/css">
#faq p.pad { display: inline-block;
border: thin dotted; padding: 1px;
font: bold small sans-serif; }
#faq p.mad { position: relative;
bottom: -1em; }
</style>
</head>
<body>
<div id="faq">
The reason that the numbers on a keyboard are arranged
<p class="pad">
7 8 9
<br/>
4 5 6
<br/>
1 2 3
</p>
while the keys on a telephone are
<p class="pad mad">
1 2 3
<br/>
4 5 6
<br/>
7 8 9
</p>
is ...
</div>
</body>
</html>
Figure 3.23 shows how this code appears in a typical browser. Notice how
the second inline block paragraph's position is ofset to align the middle line
(4 5 6) with the baseline of the parent element's text. he ofset works out to
an even -1 em because the embedded paragraphs have a small font size. If the
embedded elements had the same font size as the parent element, the ofset
would be -1.2 em, because that is the normal ratio of line height to font size,
and it is close to the ratio of
medium
to
small
in font size values.
