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 ( ) below!
Agree with a comment or answer? 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 !
ewar92
February 19, 2019, 6:33pm
2
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)
mtf
February 19, 2019, 9:47pm
7
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…
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.
_31337
June 1, 2019, 8:13pm
18
kinda tricky here, I’ve created same size boxed but didn’t use padding prop
1 Like
mtf
June 1, 2019, 8:39pm
19
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; */
}
mtf
February 5, 2020, 12:03am
21
margin: 100px auto 100px 100px;
Does the given solution include auto
in this declaration?
Or this one,
margin: 100px auto 50px 100px;