What am I doing wrong? margin padding

What am I doing wrong? Tell me please

Can you provide a link to the exercise please? We can’t see what it’s meant to look like. :slight_smile:

1 Like

https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-learn-css-typography/lessons/learn-css-code-challenges/exercises/padding-margin-challenge

added margin-right: 100px and the code now works

2 Likes

I’ll go over it step by step and maybe that’ll clarify things for you a bit:

  1. Notice that .block has a width: 100px and height: 100px as well
  2. Remember that padding will help you change the size of the blocks
  3. Remember that margin helps you with the space around the blocks
  4. For the top block #teal
    1. height needs to be 100px. You already have that.
    2. It needs to be 200px wide. The block is already 100px, so you need to add an extra 100px of padding. You can do this to only one side, or like you did, you can add 50px to both sides. You can use the shorthand for this as well with padding: 0 50px;
    3. For the margin, it needs 100px on top, left and bottom sides, while the right can be anything. A simple solution would be to apply margin: 100px, giving you 100px of margin all around it.
  5. For the bottom block #purple
    1. height needs to be 200px. The block is already 100px. Adding 50px at the top and bottom would fix this.
    2. it needs to be 200px wide as well. The block is already 100px. Again, adding 50px to the right and left would fix this. Together with the previous point, you could apply padding: 50px; to get 50px of padding in every direction and make the block the size you need.
    3. For the margin, you want 100px at the top, 100px to the left, 50px to the bottom and anything to the right. It’s important to remember here that the #teal block already has a bottom margin of 100px, which means your bottom block #purple already has the correct margin in that direction. One possible solution would be to use the shorthand: margin: 50px 100px;. This works because although you are setting the top margin to 50px, the other block #teal already has 100px! So it stays at 100px.
4 Likes

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.