odin-default-css-exercises/margin-and-padding/02-margin-and-padding-2/README.md

19 lines
1.0 KiB
Markdown
Raw Permalink Normal View History

2021-08-17 20:27:54 +00:00
# Margin and Padding #2
This one is a little nicer looking, and a little closer to something you might see in the real world. You'll need to change a little more than just margin and padding to make it look exactly right.
## Desired outcome
2021-08-18 13:50:55 +00:00
![desired outcome](./desired-outcome.png)
### Self Check
Use this section to check your work. On _these_ projects, your goal isn't to attain 100% pixel perfection, but to use the tools you've learned to get relatively close to the desired output.
2021-08-18 13:50:55 +00:00
- There is 8px between the edge of the card and its content (the blue sections).
2021-08-18 13:50:55 +00:00
- There is an 8px gap between each of the blue sections inside the card.
- The title of the card uses a 16px font.
2021-08-18 13:50:55 +00:00
- There are 8px between the title text and the edge of the title section.
- The content section has 16px space on the top and bottom, and 8px on either side.
2021-12-14 15:52:09 +00:00
- Everything inside the `.button-container` section is centered, and there is 8px padding.
- The Big Button is centered on its own line.
2021-12-14 15:52:09 +00:00
- The Big Button has 24px space on the sides, and 8px on top and bottom.