6 – Padding and Margins – Bourne to Code

Developing Programming and Development (learning strand) skills, specifically:

Understand that websites are made of linked webpages
Understand that web servers allow websites to be accessed by users via web browsers on networks
Understand that CSS rules can be applied via an external stylesheet, an internal stylesheet, or an inline style sheet

After you have done everything so far, you should see something similar to the following image when you open your index.html in a browser:

There are several things we can do to improve this page:

Let’s examine the box model below: A box has top, bottom, left or right margin. By default all the four margins are zero.

The model shows that the top margin is what we need to achieve the space between the topbox and the container which contains the left and right box inside it.

margin-top: 10px;

Lets add some space between the left and the right boxes.
If we add a margin using the right box, we will use its left margin; if we add a margin using the left box, we use its right margin.
Important note: if we add a margin to a box, it will move to make room for the added margin.
For example: if we add 10px of margin-left to the right box, it will move 10px to the right. This may result in the right box moving outside the big container and mess up our layout!
To solve this problem, we need to decrease the width of the right box by 10px so that it will remain inside the container.
Before adding the margin:

#rightbox {
width: 640px;
height: 600px;
background-color: grey;
float: right;
}

#rightbox {
width: 630px;
height: 600px;
background-color: grey;
float: right;
margin-left: 10px;
}

Can you work out what changes made and why? If your image is out of place, can you fix it independently?

The hyperlinks inside the leftbox are too close to the borders of the box. We need to add some space between the box border and the hyperlinks.

The model (above) shows that the padding is what we need to achieve the space between the box border and the content. Just as margin, padding also has four sides: left, right, top and buttom. After some experimenting, I found the following works best for me:

padding-top: 40px; 
padding-left: 10px;
padding-bottom: 20px;
padding-right: 10px;

Understood images are another form of data in addition to text
Developed understanding of using images effectively in web design
Further developed skills in applying CSS and HTML to create a purposeful website

Create two inter-linked web pages with the same style that you have been following throughout this unit.

Your rightbox now should have some text and at least one image. Sometimes, it is very convenient to use tables to organise our content or images. Please follow this tutorial carefully to add a table in your rightbox.
- challenge can you look up online how to style a table using CSS?

So far, we have learned how to style our webpages by placing some CSS (cascading style sheet) code between the start <style> and the </style> tags.
Professional web developers prefer to use separate CSS files also known as external style sheet so they can use the same style sheet on different webpages without have to write the same code again and again.
Using an external style sheet is especially useful when you want to change the look of all your webpages. Because you only need to change one style sheet file and then all the webpages use this style sheet will all have been changed.
Please have a look at this link to learn how to create an external style sheet and include it in all your webpages.
Upload your separate style sheet file and the html files that you have linked your style sheet to.