FAQ: Code Challenge: CSS Design - Padding vs. Margin

This community-built FAQ covers the “Padding vs. Margin” exercise from the lesson “Code Challenge: CSS Design”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Padding vs. Margin

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

I solved this excercise, but it wasn’t assessed as correct. So I pressed “Solution”. I examined the given solution and my solution, they were basically the same, only the order of padding and margin declarations was different and for one “0” I had typed “px” after it.

I then took a screenshot of the given solution, reset the excercise, solved it exactly like the given solution and it still wasn’t assessed as completed. So there seems to be a bug here.

9 Likes

Can someone explain to me why the padding for #teal is 0 50px? I understand the 0, but I cannot wrap my head around the 50px. Thanks!

3 Likes

margin can be written the following way:

margin: top right bottom left

so in case of #teal that would be:

margin: 0 50px 0 50px;

which is some repetitive code, so we can shorten the code to:

margin: 0 50px;

the left and right margins are now grouped, and the top and bottom margins as well

1 Like

My question is more why is it 50px when the spec sheet calls for 100px for top to bottom and 200px for left to right in the padding?

2 Likes

no, the total dimension of the div should be 100xp in height and 200px width. The element is already 100px by 100px from itself (width and height)

Study the following example…

HTML

<div><section></section></div>

CSS


      div, section {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
      div {
        padding: 50px;
      }

The view…

padding_expands_the_box

1 Like

Got it. So because 100px is the default, you only want it to be adjusted by 50px to reach 200px?

Why is it that writing the code as 200px doesn’t overwrite the default?

1 Like

padding is spacing inside the element, so adding padding will expand the element. So padding and with/height can perfectly life together.

some information about the box model:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model

Why is this not working?

#teal {
  background-color: #A8D0DB;
  padding: 0 50px;  
  margin-left: 100px;
  margin-top: 100px;
  margin-bottom: 50px; 
  margin-right: 3px;
}

#purple {
  background-color: #414073;
  padding: 50px 50px;
  margin-left: 100px;
  margin-top: 100px;
  margin-bottom: 50px; 
  margin-right: 3px;
}
1 Like

I’m wondering why its necessary to declare a margin size for the right when the exercise says it doesn’t matter what the size is??

it absolutely matters, for example:

https://jsbin.com/fakokaseno/edit?html,css,output

see how the right element is pushed because of the right margin?

Yes I’m aware it does that. I’m asking why in this lesson, it requires you to put an input when in this lesson, it states it doesn’t matter what the value is (It states “any possible value” on the right hand side).

Excuse me, it says any positive value.

given there are no elements to the right, in this case it doesn’t matter

awesome! I appreciate the help.

kinda tricky here, I’ve created same size boxed but didn’t use padding prop

1 Like

Your style rules are changing the width and height properties, which should remain at 100px as set in the .block rule. Use padding to increase the size of the boxes.

1 Like

I’m confused why my code was declared incorrect when the solution gives the same results

.block {
  height: 100px;
  width: 100px;
  display: block;
}

#container{
  background-color: #F4E8C1;
 	position: absolute;
  width: 100%;
}

#teal {
  background-color: #A8D0DB;
  padding: 0px 50px;
  margin: 100px auto 100px 100px;
/*   padding: 0 50px;
  margin: 100px; */
}

#purple {
  background-color: #414073;
  padding: 50px;
  margin: 100px auto 50px 100px;
/*   padding: 50px;
  margin: 50px 100px; */
}
margin: 100px auto 100px 100px;

Does the given solution include auto in this declaration?

Or this one,

margin: 100px auto 50px 100px;