COMPUTER EDUCATION 8

MORE CSS
COMPUTER EDUCATION 8
MORE CSS

LEARNING OBJECTIVES

✓ identify the ways to write the value for margin and

padding
✓ differentiate margin from padding
✓ apply the margin and padding property in HTML
document.
 COMPUTER EDUCATION 8
MORE CSS

Overview/Review PROPERTIES FOR TODAY

Borders and margin
are used in creating spaces
margin padding
around an element.
margin-top padding-top
margin-right padding-right
Discover how to use the margin-bottom padding-bottom
margin and padding property margin-left padding-left
by understanding the content
and answering the activities.
COMPUTER EDUCATION 8
MORE CSS

Content

What is Margin and Padding?

Margin is the space outside the border while padding is the space inside the
border.

CSS Box Model

LEGEND:
MARGIN
PADDING
BORDER
COMPUTER EDUCATION 8
MORE CSS

margin-top margin-right
margin-left margin-bottom
These 4 properties are used to set the individual values of margin for each
side of the element.
FORMAT: selector {margin-top: value;}
selector {margin-right: value;}
selector {margin-bottom: value;} Property Value/Sample
selector {margin-left: value;} margin-top (in px, pt, cm, etc.)
margin-bottom 10px, 25cm, 160pt, 400px
margin-left
margin-right
COMPUTER EDUCATION 8
MORE CSS

Content
Sample
Sample
Code
Output
COMPUTER EDUCATION 8
MORE CSS

Content
margin Sample
This is the shorthand margin property Code
for the 4 individual margin side.
FORMAT: selector {margin: top-value right-value
Property bottom-value left-value;}
Value/Sample
margin (in px, pt, cm, etc.)
10px, 25cm, 160pt, 400px

Sample
Output

Note: Values of the margin are

declared in clockwise format.
COMPUTER EDUCATION 8
MORE CSS

padding-top padding-right
padding-left padding-bottom
These 4 properties are used to set the individual values of padding for
each side of the element.
FORMAT: selector {padding-top: value;}
selector {padding-right: value;}
selector {padding-bottom: value;}
selector {padding-left: value;} Property Value/Sample
padding-top (in px, pt, cm, etc.)
padding-bottom 10px, 25cm, 160pt, 400px
padding-left
padding-right
COMPUTER EDUCATION 8
MORE CSS

Content
Sample Sample
Code Output
COMPUTER EDUCATION 8
MORE CSS

Content
padding
Sample
This is a shorthand padding property Code
for the 4 individual padding side.
FORMAT: selector {padding: top-value right-value
bottom-value left-value;}

Property Value/Sample
padding (in px, pt, cm, etc.)
10px, 25cm, 160pt, 400px Sample
Output

Note: Values of the padding are

also declared in clockwise format.
COMPUTER EDUCATION 8
MORE CSS

Content

Source: https://youtu.be/UlG0ZAM65fQ
COMPUTER EDUCATION 8
MORE CSS

Content

Source: https://youtu.be/V072uiG5FIg
Activity

Checkpoint

Answer the following questions to move through the lesson.

Make sure to use and click only the designated button.
GOODLUCK ☺

Note: While you are in CHECKPOINT, refrain from using the buttons “Next”
and “Preview” below. Click the designated button for your answer. ☺
Activity
Checkpoint

QUESTION NO.1
Which CSS code is incorrect? Click your answer.

A
h {padding: 50px 100px 150px 200px;}

B
p {padding: 20px 300 px 80pt 5 cm;}

C
h1 {padding : 10cm 20px 30pt 40px;}

Note: While you are in CHECKPOINT, refrain from using the buttons “Next” and “Preview”
below. Click the designated button for your answer. ☺
Activity
Checkpoint
Try Again
QUESTION NO.1
Which CSS code is incorrect? Click your answer.

A
h {padding: 50px 100px 150px 200px;}

B
p {padding: 20px 300 px 80pt 5 cm;}

C
h1{padding : 10cm 20px 30pt 40px;}
Activity
Checkpoint
Correct
QUESTION NO.1
Which CSS code is incorrect? Click your answer.

A
h {padding: 50px 100px 150px 200px;}

B
p {padding: 20px 300 px 80pt 5 cm;}

C
h1 {padding : 10cm 20px 30pt 40px;}

Next Question
Activity
Checkpoint

QUESTION NO.2
Will this code work?

Will work Will not work

Note: While you are in CHECKPOINT, refrain from using the buttons “Next” and “Preview”
below. Click the designated button for your answer. ☺
Activity
Checkpoint
Try Again
QUESTION NO.2
Will this code work?

Will work Will not work

Activity
Checkpoint
Correct
QUESTION NO.2
Will this code work?

Will work Will not work

Next Question
 Activity
Checkpoint

QUESTION NO.3
Which of the following CSS property sets the value for the left side
padding?

A B C D
margin-left margin-right padding-top padding-left

Note: While you are in CHECKPOINT, refrain from using the buttons “Next” and “Preview”
below. Click the designated button for your answer. ☺
 Activity
Checkpoint
Try Again
QUESTION NO.3
Which of the following CSS property sets the value for the left side
padding?

A B C D
margin-left margin-right padding-top padding-left
 Activity
Checkpoint
Correct
QUESTION NO.3
Which of the following CSS property sets the value for the left side
padding?

A B C D
margin-left margin-right padding-top padding-left

Next Question
Activity
Checkpoint

QUESTION NO.4
Select the CSS code based on the output.

A B C

Note: While you are in CHECKPOINT, refrain from using the buttons “Next” and “Preview”
below. Click the designated button for your answer. ☺
Activity
Checkpoint Try Again

QUESTION NO.4
Select the CSS code based on the output.

A B C
Activity
Correct
Checkpoint

QUESTION NO.4
Select the CSS code based on the output.

A B C

Finish Line
Activity

Checkpoint

CONGRATS YOU PASSED THE CHECKPOINT!

Now let’s apply what you have learned.

COMPUTER EDUCATION 8
MORE CSS

Thank you for listening ☺

References:
• Laura M. C., & Mario A. C. (2015). I.t. web third edition. Muntinlupa City : Primes
Learning Company.
• https://youtu.be/UlG0ZAM65fQ
• https://youtu.be/V072uiG5FIg
• https://www.htmldog.com/guides/css/beginner/margins/
• https://www.w3schools.com/css/css_margin.asp
• https://www.w3schools.com/css/css_padding.asp
• https://winkgo.com/funny-congratulations-memes/

Additional Resources
List of Color Names Supported by All Browsers
• https://www.w3schools.com/cssref/css_colors.asp