Styling the <h2> and <h3> Elements

Styling the <h2> and <h3> Elements

The <h2> and <h3> elements sit inside the #container and #container2 elements. Some browsers will display these heading elements and their top margin inside the container. Other browsers will display the headings only and allow the margin to poke out the top of the container. This is explained in more detail in the "Trapping Margins" Note in Lesson 13, "Styling a Block Quote." There are many ways to overcome this problem. In this lesson, the top margins on the <h2> and <h3> elements will be removed using margin-top: 0 (see Listing 21.5 and Figure 21.5).

Listing 21.5. CSS Code for Styling the <h2> and <h3> Elements

body
{
    margin: 0;
    padding: 0;
    font: 90% arial, helvetica, sans-serif;
    background: #387A9B;
    color: #333;
}

h1
{
    background: #D36832;
    color: #FFF;
    margin: 0;
    padding: .5em 3%;
    border-bottom: 5px solid #387A9B;
}

h2, h3
{
    margin-top: 0;
}

Figure 21.5. Screenshot of styled <h2> and <h3> elements.