en:web_development:layout:padding_margin
This is an old revision of the document!
Table of Contents
Web Development Lesson 4 - 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>andwidth: 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: 300px;
- 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.
en/web_development/layout/padding_margin.1639357543.txt.gz · Last modified: 2023/08/16 09:33 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
