7.5.4. Padding: Known Issues
half-leading of 3 pixels is added to the content area, not subtracted(since the line-height is more than thefont-size). This will result in an inline box 18pixels tall, and its top is aligned with the top of the line box.Thus Figure 8-56.
Figure 8-56. Top-aligning text with a different line height
Before we go any further, let's see what happens when we addbox properties to inline elements.
order to match the decoration color with each element, you need to explicitly declare the decoration, as follows:P {text-decoration: underline; color: black;}
B {color: gray; text-decoration: underline;}
<P>This paragraph, which is black and has a black underline, also contains
<B>boldfaced text</B> which has its own gray underline.</P>In Figure 4-62, the B element is set to be gray and to have an underline. The gray underline "overwrites" the parent's black underline, and sofont-weight: bold;} P {margin-left: 5em; position: relative;} <P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut <SPAN CLASS="change">***</SPAN> laoreet dolore magna aliquam erat volutpat.</P>
Figure 9-22. Another approach to defining a "change bar"
Remember when we mentioned static-position much earlier in the chapter? Here's one example of how it works and how it can be very useful.