Web Design with HTML and CSS

126

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

8 Add the following code to your p element:

margin-top:0em;

9 Save your fi le and preview it in the browser.

With the bottom margin of the heading and the top margin of the paragraph set to 0,

the space between them has collapsed.

You can now see that the space between your heading 2 and the fi rst paragraph has collapsed.

To increase space between elements, you can increase margin values. For example, you will

now increase the space between your paragraphs.

10 Add the following code to your paragraph (p) element:

margin-bottom:1.5em;

Remember that 1 em in this style sheet is equal to 16 pixels, so setting a value of 1.5 ems is the

same as adding 24 pixels.

11 Save your fi le and preview it in the browser.

You can now see the space between your paragraphs increase. At this point, the borders

around the elements have served their purpose; however, you don’t want to lose them

completely so you will comment them out. Commenting is a process that deactivates a

style without removing the code.

12 Add the following code (highlighted in red) to the border rule in your paragraph

element:

/*border:thin red solid;*/

The forward slash and the asterisk at the beginning and end of the code will disable

this rule. However, the original code is always available in case you want to enable these

borders again.