Select Lesson
Margins
5 min
Padding
5 min
The Box Model:
10 min
Margins with text
5 min
Creating an image gallery
5 min
Create a dynamic gallery with percentages
5 min
Lesson 17. Spacing with margins
15 min
Margins quiz
5 min
Make your own box model
30 min
Adding Spacing HTML/CSS
Level OneMargins
5 min
Padding
5 min
The Box Model:
10 min
Margins with text
5 min
Creating an image gallery
5 min
Create a dynamic gallery with percentages
5 min
Lesson 17. Spacing with margins
15 min
Margins quiz
5 min
Make your own box model
30 min
60 min
Margins, padding and box-model
Adding spaces around elements
Concepts
Margins
The margin
property is used to define the spacing around an element outside the border. It is transparent with no background color.
An element is a box with four sides. The margin is the distance from each side to the neighboring or parent element.
The top, right, bottom and left margin properties can be changed independently and a shorthand margin property can also be used to change all the margins at once.
Example:
h1 {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
Shorthand:
h1 {
margin: 100px 150px 100px 50px;
}
Value | Description |
auto | The browser automatically calculates a margin |
length | Gives a specific a margin in px, pt, cm, etc. |
% | Gives the margin as a percent of the width of the element it is contained in |
inherit | Says that the margin should be inherited from the parent element |
Now remember that all of our elements on the webpage are inside the body
container, which is inside the html
container. Even when we do not write them in our code the browser automatically adds them.
Concepts
Padding
The padding
property in an element is used to control the space between the content and the border.
For example, padding
is what separates a photo from the border that frames the photo. Unlike margin
, the padding
's color is affected by the background color of the element.
Values for padding
and margin
.
(padding:value;
)
Value|Description||
auto |The browser will automatically calculate a margin||
length |Gives a specific a margin in px, pt, cm, etc. Default value is 0px||
% |specifies the margin as a percent of the width of the element it is contained in||
inherit |Specifies that the margin should be inherited from the parent element||
Here are the different ways of writing margin
or padding
Code for padding
| ||
---|---|---|
Four paddings
padding-top: 100px;
| ||
Shorthand: 4 sides
padding: top right bottom left}}
| Shorthand: 3 sides
padding: top (right and left) bottom
| |
Shorthand: 2 sides
padding: (top and bottom) (right and left)
| Shorthand: All sides
padding: all sides
|
Concepts
The Box Model:
In HTML you can treat everything like a box or container. This is called a box model.
Any element has these 5 boxes as part of it. It is easiest to see with an image
- The position on the page- top, bottom, middle, left, right, 300px across etc
- The see-through margin is separating the border of our
image
element from thesection
element it is inside. - The border outlines the element
- The padding separates the border from the content and
- The content is what is actually inside the element.
body
element and the HTML
element
Heads Up!
If you right click and INSPECT a part of a webpage you can see a live version of the box model.
Concepts
Margins with text
Now lets use an example to demonstrate how we would use margins to control the spacing around the letters xyz.
Right now all we have in the HTML code is:
<body>xyz</body>
In the CSS code we have set the colors so it is easier for you to see the changes:
Without having made changes to the code, we can see there is already space between our text and the sides of the page. This is because chrome developer has a default "user agent style" that sets the margin to 8px. We can remove this by adding the following code to the body tag in our css:
body{
margin: 0px;
}
Now you can see the body
element is flush against the parent element html
Concepts
Creating an image gallery
We want to create an image gallery.
To begin, we add three images of the same size to our HTML.
We then add a margin of 30px around the image using the following code:
As you can see the spacing isn't even. The margins in between the images have automatically been combined.
There are a few ways to fix this. One way is using the container's padding with the image's margin.
By adding 15px to the image's margin and the container's padding the total space between images and the container's border is 30px.
Concepts
Create a dynamic gallery with percentages
You can use percentage, %, to make it easier to size your images.
width: 100%;
will make that element fill the entire width space it can, the Content Box, of the element above it.
(Remember this does not include padding and borders... unless you added box-sizing
, which is taught later on.)
If you want to fill the whole width of the body of your page. Time for some math.
We have 3 images so we want to break up the width into 3 equal sections.
- section = 100/3
- section = 33.33
We want the images to take up most of the width of it's section. Here we decided 2/3rds but you could do 3/4s or what ever suits you.
- imageWidth = section * 2/3
- imageWidth = 22.22%
The rest is half margin and half padding
- marginPadding = section * 1/3 /2
- marginPadding = 11.11/2
- marginPadding = 5.56%
- marginPadding = 11.11/2
padding:5.56%, margin:5.56% and img width: 22.22%.
Round those down so we have a margin of safety that isn't noticeable to the human eye.
So padding:5.4%, margin:5.4% and img width: 22%.
HTML/CSS 1 Lesson
Lesson 17. Spacing with margins
Code Avengers Quiz
Margins quiz
Activity
Make your own box model
Go to the activities list →
This is a 3 part exercise.
- Make a paper box model
- Work out the measurements
- Recreate the box model using HTML/CSS
This activity could take up to 60 min if no scaffolding is used.
20 min if the templates are used and not much time is spent on decoration.
Heads up!
USA Users: This activity uses IOS A4 paper and cm, it can be easily changed to US letter and inches if required.
Objective
Have a solid understanding of the box model for a single element and learn to translate measurements from paper to computer.
Background
Every HTML element can be thought of as a box. The CSS box model wraps that box in other boxes. The box model consists of margins
, borders
, padding
, and the actual content
of the element.
Heads up!
To see the box model in action right click on an element on a webpage and inspect it. You can see the CSS styling and an interactive box model.Preparation
- A4 per person, (printed template below, if required.)
- Pens, pencils or paint for coloring
- Scissors
- Glue
- Ruler
Print image, full size, on an A4 paper
Outcomes
An A4 piece of paper will create an A5 display for the wall (A). It will contain:
- an A7 image (C)
- an A6 padding section (B), that should have the same background color as the image.
- a colored border (D) (0.5 cm wide), cut from the last A7 piece and wrapped around the padding section.
- Be labeled as
margin
,border
,padding
, and the actualcontent
of the element and your name.
1.Make a box model: Instructions
This is a cut out exercise that can either be made from the template or a blank A4.
Blank A4 in landscape.
- Cut A4 in half.
- Keep one A5, as section A, and turn the other to landscape.
- Cut A5 in half.
- Keep one A6, as section B, and turn the other to landscape.
- Cut A6 in half.
- Keep one A7, as section C.
- Measure strips of the remaining A7, 0.5 cm wide along the longest edge. 5-6 strips are needed.
- Cut out strips for section D.
OR Template
- Print off the template.
- Cut out the 4 sections A, B,C and D strips
You could also use different colored paper cut to the right sizes.
Create
- Create a simple image on Section C.
- Color it in and add a background color.
- Color in section B. the same color as your background on Section C.
- Decorate the Section D strips
- Glue C. onto the center of B.
- Glue B. onto the center of A.
- Glue the strips of D around B.
Labels
- Have a talk with others about what each section is called, read the box-model information to help you. When you agree,
- Add the labels to the section or write them on yourself
margin
,border
,padding
, andcontent
of the element and named by you
Now you should have a easy to refer to guide that you can hang on your wall.
2.Measurements of the box model. (Algebraic, Yay!)
On a separate sheet of paper, or online on Code Avengers Projects IDE try to
work out the measurements for margin
(m), padding
(p), content (C)(<img>
) and border
(b).
- Hard:Work out this logic puzzle to get the dimensions and fill in the table below, or
- Medium: Measure your model, or
- Easy: Scroll down to the bottom for the table of answers.
Your clues:
- The box model is A5 in size.
- An A5 piece of paper is 21 cm wide X 14.8 cm high in total.
- The content box (C) is A7, 10.5cm wide X 7.4cm high,
- The padding box contains the content box (C) centered between 2 equal padding measurements (p).
padding box=C+2p
- The padding box height is the same as C's width
padding box (height)=C(width)
thereforeC(width)=C(height)+2p
- The padding box width is the double C's height
padding box(width)=2xC(height)=C(width)+2p
- The border is 0.5cm
Table: Fill in the measurements
letter | width (cm) | height (cm) |
---|---|---|
total | ||
b | ||
C | ||
pformula | pw= | ph= |
p | ||
mformula | mw= | mh= |
m |
Answer table
letter | width (cm) | height (cm) |
---|---|---|
total | 21 | 14.8 |
b | 0.5 | 0.5 |
C | 10.5 | 7.4 |
pformula | pw=(2Ch-Cw)/2 | ph=(Cw-Ch)/2 |
p | 2.15 | 1.3 |
mformula | mw=(total-cw-2bw-2pw)/2 | mh=(total-Ch-2bh-2ph)/2 |
m | 2.6 | 1.65 |
3.Write the HTML/CSS code.
Try to write the code to recreate your paper box model in the Code Avengers' Projects IDE space.
Use an image
for the content.
Extra for experts: Add a div class
around the image
element with a border
and the total width
to show the image's margin
.
Try to do it yourself first, below there is a template and below that are the answers to help you if you are stuck.
- Hard: Write it yourself with no help here
- Medium: Use the template below
- Easy: Refer to the example answer code below
Template
- <style>
- .container{
- border:;
- width:;
- }
- img{
- background-color:;
- border:;
- height:;
- margin:;
- padding:;
- width:;
- }
-
- </style>
-
- <div class="">
- <i>
- </div>
An Example Answer
- <style>
- .container{
- border:1px dashed gray;
- width:21cm;
- }
- img{
- background-color: rgb(220,242,250);
- border: 0.5cm solid powderBlue;
- height: 7.4cm;
- margin: 1.65cm 2.6cm;
- padding: 1.3cm 2.15cm;
- width: 10.5cm;
- }
-
- </style>
-
- <div class="container">
- <!--add your own image src and change the CSS colors to match-->
- <img src="/image/Happy-Cloud.png" width="100%">
- </div>
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F