FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

AJ Brommy

@AJ-Brommy

I used to do that and default things to 0. But when I read:

"// PLEASE NOTE: Adding global style rules using the selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: { color: red }, for a quick example!"

I avoided doing so. However, reading it again, I think I miss read and panic'd lol, it's just a warning to be careful with the testing.

newmoon

@newmoon

I don't think that will help out with the collapsing margins

AJ Brommy

@AJ-Brommy

no? oh

I thought it would default all browsers to use the same. 0, or what I state it to be.

newmoon

@newmoon

Collapsing margins are consistent across all browsers - it's a controversial design in CSS

You may be thinking of something like normalize.css or reset.css - those are options to add in codepen Settings -> CSS

They normalize the default size of all elements across browsers - but unfortunately, margins will still collapse

Morchid Chellali

@Morched23MJ

Is it mandatory to keep the test suite in my pens? Or it's a pain to the folks who are gonna check my projects for the certificate to add this test suites later on? And thus, I could remove them once I would get my certificate?

AJ Brommy

@AJ-Brommy

Ok, I see. Yes I just read the link you sent me. But most if it went over my head lol. I'm gunna have to disect it slowly me thinks. Thanks tho. I think this could involve one of the things that has bugged me for years, I may finally come to understand it!!

I think you only need to add it for yourself, to make sure you have passed the criteria. If you are not using it, take it out. I can't see it being a problem. I didn't use it last year with my old tribute you page and portfolio.

@Morched23MJ

Morchid Chellali

@Morched23MJ

I thought perhaps it would help the developers who are gonna check my projects for the certification, it ease their work.

newmoon

@newmoon

@AJ-Brommy This is another good example of margins collapsing. The <h3> elements have a margin on top that makes this white space appear between sections. Add padding: 1px to the sections and it all goes away: https://codepen.io/anon/pen/qMdPXo?editors=1100

br3ntor

@br3ntor

@newmoon thank you

AJ Brommy

@AJ-Brommy

Ok - but I still don't understand why the white disappears, but the word "section" doesn't move up!? You only add 1px, techinically 2, top and bottom, so why the big space. It's as if the grey box suddenly grows

@Morched23MJ if that's the case I think they would just add it themselves :)

newmoon

@newmoon

It appears that the gray space grows, but actually the margin above the <h3> elements collapses

AJ Brommy

@AJ-Brommy

i dont get it lol

newmoon

@newmoon

Hard to explain lol ¯\_(ツ)_/¯

I don't fully get it either

AJ Brommy

@AJ-Brommy

to be if it collapses - disappears - then surely everything should just move up. its as if it swaps it for padding

lol

So how does one ever get a 1 pixel padding

newmoon

@newmoon

This does the same thing:

section h3 {
  margin: 0;
}

Bjorn van de Peut

@bjorno43

padding: 1px;, not that hard..

:innocent:

newmoon

@newmoon

I don't know how to explain it any better than with that example. The space between sections collapses by setting h3 to a margin: 0 or setting the section to have 1px of padding

AJ Brommy

@AJ-Brommy

@bjorno43 goto the link @newmoon sent, go to section, add padding: 1px; and see what happens lol

newmoon

@newmoon

To answer your question about how someone gets 1px of padding. Most people use a reset css of some type. The third way to remove the spacing between sections is to go to Settings -> CSS and select the radio button for "Reset"

AJ Brommy

@AJ-Brommy

Yeah no worries, I really do appreciate how you laid that out to show me. I will play with it and try make as much sense of it as i can :) its really helpful so thank you

newmoon

@newmoon

Always happy to add more confusion lol

AJ Brommy

@AJ-Brommy

lolololol

but these things are important. I've been dabbling for years, and every now n then something would throw me, things wouldn't go as expected, and I could never figure it out, i didn't know about collapsing margins. I think this is the key. I think this is important!

newmoon

@newmoon

OK, so some spacing walks into a bar, trips and falls on the floor. The bartender asks if he should be cut off and the spacing replies, "No, I'm just a collapsed margin."

https://css-tricks.com/what-you-should-know-about-collapsing-margins/

https://twitter.com/verpixelt/status/601852215419138048

AJ Brommy

@AJ-Brommy

Hmmmm ok thats interesting

So it's as if it's there, we just can't see it

"On a more serious note, collapsing margins are real and they can be a real pain in the neck if you're not aware of what they are and how they behave. Here are a couple of scenarios where we'd see these little buggers come into play." --- YES!!! I wish I knew this years ago, but no course, or no book, ever told me! :( lol

Bjorn van de Peut

@bjorno43

@AJ-Brommy That's actually pretty normal. All objects have default margins and paddings. When you override them, they disappear. So if the default was 10 and you change that to 1, it looks like it becomes a lot smaller. These days most ppl use Normalizers to fix this. In the earlier days of CSS ppl used:

* {
    padding: 0;
    margin: 0;
}

To fix that issue. But that's considered bad practise now.

AJ Brommy

@AJ-Brommy

Why is it considered bad practice? its short concise and does the job :(

Bjorn van de Peut

@bjorno43

Because it overrides all objects. Not just the ones you want to override. It means coding a whole lot more when the project becomes bigger

AJ Brommy

@AJ-Brommy

ah because there are many, so best to just include a present pre written normalize style sheet

Bjorn van de Peut

@bjorno43

Exactly

Yashwardhan Pauranik

@yashwp

https://stackoverflow.com/questions/51979856/console-log-doesnt-fire-on-document-scroll-reaches-to-end
Please help me with this...

alpox

@alpox

@yashwp You may want to use clientHeight instead of offsetHeight as those are calculated slightly different. The scrollHeight calculates like clientHeight

@yashwp MDN even has your exact case written out

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

Yashwardhan Pauranik

@yashwp

@alpox can you answer on SO for the changes you want me to do...

alpox

@alpox

@yashwp No, I'm not active on SO

Where communities thrive

People

Repo info

Activity