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>
<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; }
<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 ...
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.
Search WWH ::

Custom Search