Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z
Symbols | A | B | C
The math in this situation works out something like this: assume thetop inner edge of the DIV is at the pixel position100. The browser, in order to figure out where the top inner edge ofthe floated element should be will do this: 100px+ (-15px)margin + 0padding =85px . Thus the top inner edge of the floated | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z
Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.
<P STYLE="font-size: 12px; line-height: 12px;"> This is text, <EM>some of which is emphasized</EM>, plus other text<BR> which is <B STYLE="font-size: 24px;">boldfaced</B> and <SPAN STYLE="vertical-align: top; line-height: 4px;">tall</SPAN> and which is<BR> larger than the surrounding text. </P>
Since the line-height for the "tall" text is less than its font-size, the inline box for that element is smaller. This will change the placement of the
Before we create the title, let's clean up a few last details in the article's body. The overall article has fully justified text in a serif font. We decide that it should be easily readable, so we go with Times. We also want the article to have black text on a white background, thereby mimicking the appearance of printed text. Each paragraph has its first line indented properties. The positioned element does not flow around the contentof other elements, nor does their content flow around the positionedelement. This implies that an absolutely positioned element mayoverlap other elements, or be overlapped by them. (We'll seehow you can affect the overlapping order at the end of the chapter.)
Remember that the containing block of an absolutely positionedelement is not necessarily its parent element. In fact, it often isnot, unless the author takes steps to correct this situation.Fortunately, that's easy to do. Just pick the element that youSometimes,the values you're entering for margin get alittle repetitive:
You don't have to keep typing in pairs of numbers like this,though. Instead of the preceding markup, try this:
These two values are enough to take the place of four. But how?
CSS defines a few steps to accommodate fewer than four values formargin: