03. Normal Flow

As well as the box model, an important concept is that of normal flow. This relates to the way HTML block elements flow down the page, and inline elements flow left to right.

Common block elements are <p>, <h1>, <div>, <header>, <nav>, <header>, <main>, <section>, <footer>, <ul> and <li>.

Common inline elements are <span>, <a> and <strong>.

With CSS however we can change this native behaviour. A <li> is a block element. However, we can change it to behave like an inline element. In the index.html notice the navigation bar in <nav>.

Add the following to the stylesheet in styles/main.css.

nav ul li{	
    display:inline;
}

Note

Notice how the links in the list are now aligned left to right – this is because they now behave as inline elements.

Many HTML elements have default values. A <ul> has a left padding value. This can be removed with:

nav ul{
    padding-left:0;
    list-style:none;	
}

The list-style: none is also used to remove any list marker.

The design calls for white links. Therefore, we’ll add the following to create a blue header with white links:

header{
    background-color: #263248;	
    border-radius: 8px;
}
nav li a{
    text-decoration: none;	
    color: #fff;	
}
nav li a:hover{
    color: #7E8AA2;	
}

We can tidy the appearance by amending the nav ul li and adding a new rule for only the first list item. This will create a dividing border between the links.

nav ul li{	
    display:inline;
    padding-left:10px;
    padding-right:10px;
    border-left:1px solid #7E8AA2;
}
nav li:first-child{
    border-left:none;	
}