Web Development Lesson 5 - Layout
- Padding and Margins
  - Objective
  - Setup
  - Padding
  - Margins
  - Inline-Block

Web Development Lesson 5 - Layout

Padding and Margins

Objective

In this activity we'll test some tools for making the page more appealing and readable by introducing some spacing.

Setup

We'll be continuing on from the previous activity, but hopefully you've lost the final code because you've been playing around with positioning elements. If that's so, please replace your code with the following code.

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>Header</header>
    <nav>Nav</nav>
    <main>
        <div class="content">Section 1</div>
        <div class="content">Section 2</div>
        <div class="content">Section 3</div>
    </main>
    <footer><h3>Footer</h3></footer>
</body>
</html>

style.css

ol {
    color: blue;
  }
  
  ol ol {
    font-weight: 700;
  }

ul {
  list-style-type: none;
}

td, th {
  border-width: 1px;
  border-style: solid;
}

td {
  padding: 10px;
}

table {
  border-collapse: collapse;
}

header {
  background-color:indianred;
  border:darkred solid 2px;
  height: 100px;
  position: absolute;
  left: 16%;
  right: 0px;
}

nav {
  background-color: burlywood;
  border:yellow solid 2px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 15%;
}

main {
  background-color: lightgreen;
  border: darkgreen solid 2px;
  position: absolute;
  top: 100px;
  left: 16%;
  right: 0px;
  bottom: 80px;
  overflow: scroll;
}

footer {
  background-color: lightskyblue;
  border: darkblue solid 2px;
  position: absolute;
  bottom: 0px;
  height: 80px;
  left: 16%;
  right: 0px;
}

.content {
  background-color:coral;
  border:orangered solid 2px;
  height: 400px;
}

Padding

To see how padding works, let's add some to our content sections.

.content {
  background-color:coral;
  border:orangered solid 2px;
  height: 400px;
  padding: 40px;
}

See how our text is now further from the edges, which makes it a lot more readable.

Margins

We can do something very similar with margins. Add the following code to '.content'.

  margin: 20px;

Rather than adding space inside the orange border, 'margin' adds space outside the border.
Whether you use 'padding' or 'margin' often depends on the surrounding elements and how you want to interact with them. It also depends on any backgrounds you have in place.
As a rule, most elements require padding, but you'll want to separate images and anything with a unique background out using margins.
Depending on your browser, you've probably noticed the white space to the left of <nav> and above <heading>. These have been caused by default positioning of elements. See if you can find and fix this using the box-model pane of your Developer Tools.
There is also space between <nav> and the other elements. This is because we used 15% width on <nav> and width: 16%; on the other elements. Change width on <nav> to 16% to fix this.

Inline-Block

We saw the difference between 'inline' and 'block' elements when we modified our lists to be a sidebar (block) and a top menu (inline).
'Block' elements such as divs don't work well as inline elements, but it's possible to lay them out side by side as follows.

  display: inline-block;

Add this to your '.content' CSS and check the results.
As 'inline-block' elements, they will fill up the line then drop to the next line when the first is full. Try making the blocks wider to see this in action.

  width: 450px;

This width should stretch them out to nearly take up the screen. You can then unmaximise the window and change its size to see how the elements respond.

Next: Maintaining Consistency with PHP

Table of Contents

Web Development Lesson 5 - Layout

Padding and Margins

Objective

Setup

Padding

Margins

Inline-Block