Saturday 01st of November 2014 01:12:19 AM
"overlap." Although the margins are not really overlapping, you can visualize what's happening using the following analogy. Imagine that each element, such as a paragraph, is a small piece of paper with the content of the element written on it. Around each piece of paper is some amount of clear plastic; this plastic represents the margins. The first piece of paper (say an H1 piece) is laid down on the canvas (browser window). The second (a paragraph) is laid below it and then slid up until the edge of one of the piece's plastic touches the edge of the other's content. If the first piece of paper

CSS Tutorials

CSS Tutorials

Welcome to the CSS Tutorials. In this section we cover Cascading Style Sheets, the powerful supplement to HTML that allows you complete control over the look of your websites. We'll show you how to create Cascading Style Sheets, and some of the cool tricks you can achieve with them.

For Beginners...

Introduction to CSS
This tutorial covers the basics: what are style sheets? How do I make a style sheet? It also shows some of the cool things you can do with style sheets.

CSS Units
A description of all the units that can be used with CSS, including lengths, percentages, colours and URL's.

For Intermediate Users...

Controlling Background Images and Colours
Learn how to use CSS properties to add background images and colour to your Web pages. Lots of neat tricks and examples are included!

Controlling Fonts with CSS
In this tutorial we take a look at how to control the fonts used in your page body text, using the various font properties that can be controlled with style sheets.

Controlling Text Appearance with CSS
This tutorial shows you how to control the layout of your text using the text properties available in CSS, such as line spacing and text alignment.

Making Lists Look Nicer with CSS
You can really go to town with HTML lists when you add a sprinkle of CSS! This tutorial shows you how to make your lists stand out from the crowd.

For Advanced Users...

CSS Positioning
This tutorial teaches you how to use CSS to position images, text, and other elements on your Web pages. Essential reading for anyone who wants to start using CSS for layout.

tag appears, assuming there is room to do so. The theoreticallycorrect behaviors are shown in
Figure 8-37.

Figure 8-37

Figure 8-37. Given the other constraints, go as high as possible


Unfortunately, since there is no precise definition meaning for"as high as possible" (which could be, and in fact hasbeen, argued to mean "as high as conveniently possible"),you cannot rely on consistent behavior even among browsers that areconsidered CSS1-compliant. Most browsers will follow historical actually line up, as we can see in Figure 8-50,because the text is all baseline-aligned.

Figure 8-50

Figure 8-50. How the inline boxes (gray) influence the height of the line box

However, it is precisely the inline boxes which determine the heightof the overall line box. The line box is defined to be the distancefrom 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