Web - Introduction to CSS - Margin and Padding - Lesson

Web · Introduction to CSS

Margin and Padding

The full text of this chapter, to read or revisit. To practise, do the exercises.

Exercise 1 — Introduction to the Box Model

Before we dive into margin and padding, we need to understand the CSS Box Model. In CSS, every element is treated as a box with four areas:

1. Content: The actual content of the element (text, images, etc.) 2. Padding: Space between the content and the border 3. Border: The line around the padding (which we learned about in the previous lesson) 4. Margin: Space outside the border, between this element and other elements

Think of it like a package you get from Amazon: - The content is the item inside the box - The padding is the bubble wrap around the item - The border is the box itself - The margin is the space you leave around the box when you put it on a table

Exercise 2 — Understanding Margin

Margin is the space outside an element's border. It creates distance between one element and other elements around it.

You can use it like this :

margin: 50px;

to add 50 pixels of space around an element. (You can also use other units like

, etc.)

Key things to know about margin: - It's transparent (you can see through it) - It pushes other elements away - It can have negative values (which pull elements closer)

<!DOCTYPE html> <html> <head> <style> div { width: 200px; height: 100px; background-color: lightblue; border: 5px solid blue; } </style> </head> <body> <div>Box without margin</div> <div style="margin: 50px;">Box with margin</div> <div>Another box</div> </body> </html>

Notice how the second box is not aligned with the rest and seems to have more space around it. This is because of the margin we applied.

Margin Collapse

Vertical margins between elements can collapse (combine). If one element has a bottom margin of 30px and the next element has a top margin of 20px, the space between them will be 30px (the larger of the two), not 50px.

Exercise 3 — Understanding Padding

Padding is the space between an element's content and its border. It creates breathing room inside the element.

You can use it like this :

padding: 50px;

to add 50 pixels of space inside an element. (You can also use other units like

, etc.)

Key things to know about padding: - It's inside the border - It shares the element's background color - It increases the size of the element - It cannot have negative values

<!DOCTYPE html> <html> <head> <style> p { width: 200px; background-color: lightblue; border: 5px solid blue; } </style> </head> <body> <p>Paragraph without padding</p> <p style="padding: 30px;">Paragraph with padding.</p> </body> </html>

Notice how the second paragraph has more space between its text and border. The text feels less cramped and more readable.

Exercise 4 — Margin vs. Padding: What's the Difference?

Which property would you use to create more space BETWEEN two paragraphs?

Options

• ```margin```

• ```padding```

• ```border-spacing```

• ```gap```

Hint : Think about where each property creates space - inside an element or outside between elements.

Exercise 5 — Shorthand Notation for Margin and Padding

Both

margin

and

padding

can be written using shorthand notation.

There are 4 ways to use them: 1. Single value:

20px;

- Applies 20px on all sides. 2. Two values:

10px 20px;

- Applies 10px top/bottom and 20px left/right. 3. Three values:

10px 20px 30px;

- Applies 10px top, 20px left/right, and 30px bottom. 4. Four values:

10px 20px 30px 40px;

- Applies top, right, bottom, left in that order.

<!DOCTYPE html> <html> <head> <style> p { background-color: lightblue; border: 2px solid blue; margin-bottom: 10px; } </style> </head> <body> <p style="padding: 20px;">One value: padding: 20px;</p> <p style="padding: 10px 30px;">Two values: padding: 10px 30px;</p> <p style="padding: 10px 30px 50px;">Three values: padding: 10px 30px 50px;</p> <p style="padding: 5px 10px 15px 20px;">Four values: padding: 5px 10px 15px 20px;</p> </body> </html>

Remember the Order

A helpful way to remember the order is to go clockwise from the top: top, right, bottom, left.

Exercise 6 — Understanding Shorthand Values

In the shorthand

margin: 10px 20px 30px 40px;

, which side has a margin of 30px?

Options

• Bottom

• Top

• Right

• Left

Hint : Remember the shorthand order: top, right, bottom, left (clockwise from the top).

Exercise 7 — Applying Margins

Complete the CSS to add margin to a heading. The heading should have 20px margin on top and bottom, and 10px margin on the left and right sides.

Options: margin: padding: 20px 10px 10px 20px 20px 20px 10px 10px 10px 20px 20px 10px

Hint : Consider which shorthand format you need and how the values are ordered when using fewer than four values.

Exercise 8 — Applying Padding

Complete the CSS to add padding to a paragraph. The paragraph should have 15px padding on all sides.

Options: padding: margin: 15px 15px 15px 15px 14px 15 all: 15px

Hint : When you want the same value on all sides, what's the simplest way to write it?

Exercise 9 — Individual Side Properties

In addition to using shorthand, you can set margin or padding for individual sides using specific properties:

For margins:

margin-top

margin-right

margin-bottom

margin-left

For padding:

padding-top

padding-right

padding-bottom

padding-left

<!DOCTYPE html> <html> <head> <style> div { background-color: lightblue; border: 2px solid blue; } </style> </head> <body> <div>Normal div</div> <div style="margin-top: 30px; margin-right: 10px; margin-bottom: 50px; margin-left: 100px;">This div has custom margins on each side</div> <div style="padding-top: 5px; padding-right: 20px; padding-bottom: 40px; padding-left: 10px;">This div has custom padding on each side</div> </body> </html>

Individual side properties are useful when you need to adjust just one side or when you're building on existing styles.

Exercise 10 — Match Properties with Their Purpose

Match each CSS property with its correct purpose:

Items to match

• margin

• padding

• margin-bottom

• padding-left

Definitions

• Creates space outside an element's border

• Creates space inside an element's border

• Creates space only below an element

• Creates space only inside the left side of an element

Exercise 11 — Practical Examples: Cards and Buttons

Margin and padding are essential for creating common UI elements like cards and buttons. Let's see how they work together with borders to create these elements:

Here's an example of a simple card design using inline styles: (you don't have to understand the whole code, but you should understand 90% of it now!)

<!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; } h2 { margin-top: 0; margin-bottom: 10px; } </style> </head> <body> <div style="width: 250px; border: 1px solid #ccc; border-radius: 8px; padding: 16px; margin: 20px; background-color: #f9f9f9;"> <h2>Aquachu</h2> <p>A water-type Codémon that can create powerful water blasts. Effective against fire types.</p> <div style="display: inline-block; background-color: #4285f4; color: white; padding: 10px 20px; border-radius: 4px; margin-top: 10px;">Learn more</div> </div> </body> </html>

Notice how: - The card has padding to give space around its content - The card has margin to separate it from other elements - The heading has zero top margin but bottom margin to separate it from the paragraph - The button has padding to make it bigger and more clickable

And most importantly, notice how you understand 90% of this code, congrats!

Exercise 12 — Choosing the Right Property

You want to create a button where the text doesn't touch the edges of the border of the button. Which property should you use?

Options

• ```padding```

• ```margin```

• ```border-spacing```

• ```text-indent```

Hint : Think about whether you need space inside the element or outside it.

Exercise 13 — Advanced Shorthand Usage

Complete the CSS to create a heading with: - 30px top margin - 15px right and left margins - 10px bottom margin

Options: 30px 15px 10px 30px 15px 10px

Hint : Remember the clockwise order: top, right, bottom, left. You need to fill in all four values in this case.

Exercise 14 — Shorthand and Expanded Formats

Match each shorthand declaration with its equivalent expanded form:

Items to match

• margin: 10px;

• padding: 5px 15px;

• margin: 10px 20px 30px;

• padding: 5px 10px 15px 20px;

Definitions

• margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;

• padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px;

• margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 20px;

• padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px;

Exercise 15 — Creating a Button with Margin and Padding

Complete the CSS to create a button with: - Padding of 10px on top and bottom, and 20px on left and right - Margin of 15px on all sides

Options: padding: margin: 10px 20px 15px 20px 10px 15px 15px 15px 14px

Hint : Think about which shorthand format to use for each property and how to express the values correctly.

Exercise 16 — Margin Collapse

If one paragraph has a bottom margin of 20px and the paragraph below it has a top margin of 30px, what will be the total space between them?

Options

• ```30px```

• ```50px```

• ```20px```

• ```0px```

Hint : Margin against margin will collapse, so the larger margin usually 'win'.

← Previous lesson : Borders and Border Radius Next lesson : Quizz →

Back to the course