Why isn't the margin I set being applied to my elements?

Question

Why isn’t the margin I set being applied to my elements?

Answer

This could happen for a few reasons including typos in our CSS declarations/document and setting margin-top or margin-bottom on a display: inline; element (as display: inline; elements do not respect margin-top/bottom;).

However, another common reason this may occur is because of collapsing margins. Collapsing margins happen when we have two or more adjacent margins (adjacent top and bottom margins only) on block level elements (display: block;), the adjacent margins combine into a single margin and will compute to the adjacent margin with the highest value.

For example, given the following HTML and CSS, we would expect the margin between .one and .two to be equal to 150px:

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>My Site</title>
</head>
<body>
  <div class="one">block one</div>
  <div class="two">block two</div>
</body>
</html>

CSS:

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: lightpink;
}

.one {
  margin-bottom: 100px;
}

.two {
  margin-top: 50px;
}

But, when we factor in collapsing margins, we’ll remember that the margin that separates the two <div> elements will actually compute to 100px (the highest value of the adjacent margins).

What you are writing is correct. But the back-end code for the exercise always counts everything as incorrect. Even when I copy-paste the solution. It still counts it as incorrect. This problem has happened on several exercises

7 Likes

Yes, and it is not fixed to date. What I do in effect is refresh each time my code ran incorrectly and I am pretty sure I was right, boom, it ran correctly.
Refreshing the page is therefor the solution most of the time.
Thanks.

1 Like

It looks like the browser zoom needs to be at 100% in order to pass this challenge.

1 Like

This was my solution code:

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

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

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

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

Can anybody tell me if there is a cleaner way to do this?

6 Likes

@philosophy-flow seriously? I strongly doubt that, never experienced that before. I tried on 150% zoom still works.

I just copied my solution code, reset the exercise, and attempted to submit after pasting my solution code on multiple zoom levels; it definitely fails on certain (extreme) levels.

I’m running on an 11 inch screen, so I sometimes zoom way out to better see all of the content. You’re right, the zoom doesn’t appear to need to be at 100%, but where it is certainly seems to impact whether or not the code passes, at least on my device.

@philosophy-flow oh wow, that’s new. It’s hard to say since I’m using a 15 inch screen and on chrome browser.

The solution code is much simpler. What I learned on this exercise are you can use shorthand property to make code simpler in addition how two elements can have a override function which can lead to code more simply. I could not figure out how the id “purple” only having margin: 50px 100px; was able to get 100px gap between the teal box (the code on id “teal” override the margin since it has a larger value).

Thank you @joichitamura that cleared that up for me. : " (the code on id “teal” override the margin since it has a larger value)."

Hi, I did the margins no problem, my problem is on the padding, I cant get my head around it, could someone explain to my why is the padding for teal 0 and 50Px for top/bottom and left and right. I cannot get that.

1 Like

It took me some time to get it too, but I think it relates to the note that is included in the instructions: “Remember the initial boxes have dimensions of 100px height and width.” So since the the boxes already have the 100px of height and width, you wouldn’t add anything for the height (for teal), and then would add 50px to left and right to get the 200px for the width. I’m only going through this the first time myself, so I’m hoping someone else can confirm this for me?

6 Likes

Ok thank you, that makes perfect sense. For me this exercise was so far out of my understanding that I ended up giving up and feeling like a failure lol then after a quick second I recovered and checked the solution. Lucky for me I still didnt understand it which is why Im here :slight_smile: so thank you!

1 Like

Thanks for sharing this. This is how I understand this too.

1 Like

The exercise tells users to use “any positive value” for the right margins of both the #teal and #purple selectors.

The problem is that this doesn’t work for every positive value.

For i.e. I tried 35px for right margin and the code still tests invalid. I did not change any elements beside padding and margin properties in #teal and #purple. This was the CSS code I used:

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

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

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

#purple{
  background-color: #414073;
  margin: 100px 35px 50px 100px;
  padding: 50px;
}

Substituting 35px for 100px in each, the test will accept the value, so I used it to bypass the issue.

Hi here is solution that worked for me, maybe a little bit “cleaner”

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

#purple {
  background-color: #414073;
  padding: 50px;
  margin: 50px 100px;
}
1 Like

Looking back at my code from September, it wasn’t written well at all :joy:

Either way, yes, you did well on factorizing my code. However, your #purple margin is not exactly the same as my #purple margin. You set yours to 50px 100px meaning the top and bottom margins will be set to 50px while the left and write will be set to 100px

In my example, the top, left and right margins are set to 100px, while my bottom margin is set to 50px

I’m not sure which lesson this forum is linked to, but avoid using ID selectors in CSS. Always use class selectors. IDs are used in JavaScript, which you will either learn later, or you already did learn. Good luck with your coding :slight_smile:

1 Like

I typed my code in for that same exercise, the picture looked right, but I kept getting this prompt:

So I finally got frustrated after re-typing it several times and compared it to the solution:

Literally no difference at all. But I could not pass the challenge until I hit “Replace with solution”. I see that a few people couldn’t pass until they played around with the zoom on their browser. Just wondering if they also had identical code to the solution.

Thank you so much! I was struggling to get this until I saw your post.

I have learned that the CodeCademy text editor is very specific in it’s acceptance of solutions. If it does not match line-for-line with the expected solution, it will throw an error.

If there is a more specific answer than this, I am happy to know also.