Sunday 19th of November 2017 04:43:21 PM

center a FIXED BOX

This BOX has a fixed width.
It is centered and adjusts to the browser window.
The height adjusts to the content.
more nice and free css templates

body {
background-color: #e1ddd9;
font-size: 12px;
from the top of the highest inline box in the line to the bottom ofthe lowest inline box, as illustrated by Figure 8-51.

Figure 8-51

Figure 8-51. Stacking the line boxes together

Then the top of the line box is placed against the bottom of the linebox for the preceding line. This will give us a paragraph as shown inFigure 8-52.

Figure 8-52

Figure 8-52. The final paragraph of stacked line boxes

As we can see, the middle line is taller than the other two, but it padding:20px; margin:0px; text-align: center; } #inhalt { text-align: left; vertical-align: middle; margin: 0px auto; padding: 0px; width: 550px; background-color: #ffffff; border: 1px dashed #564b47; }

As with margins, the left padding is applied to the beginning of the element, and the right padding to the end of it; padding is not applied to the right and left side of each line.

Now let's talk about top and bottom padding. In theory, an inline element with a background color and padding could have the background extend above and below the element. Figure 7-61 gives us some idea of what that might look like. The line height isn't changed, of course, but since padding does extend the background, it should be visible, right? the entire line in a SPAN element, and assigning it a border style:

SPAN {border: 1px dashed black;}
Figure 8-45

Figure 8-45. A single-line inline element

This is the simplest case of an inline element contained by a block-level element, no different in its way than a paragraph with two words in it. The only differences are that in Figure 8-45, we have a few dozen words and that most paragraphs don't contain an explicit inline element such as SPAN.