Question about survey form exercise

[ramon2024]

HI!

Could someone explain to me what this is for? Or point me to the CSS chapter so I re-read it to understand:

*,
*::before,
*::after {
  box-sizing: border-box;
}

thank you!

[JeremyLT]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[sinarad]

Hey,

I’m by no means an expert, but from my what I’ve read, that has to do with changing the box-model for the entire document. HTML default box-sizing is in content-box, which isn’t as easy to work with as border-box. The content-box style doesn’t include border, padding, etc. in the dimensions, but the border-box style does, so all your elements look much cleaner.

Here is a link to an article that explains it really easily and well - CSS box-sizing Property ← Alligator.io

[ramon2024]

Thanks a lot for your quick response!
I understand that bit now, thanks.

Also, what about the:

*,
*::before,
*::after {

Why is it written like that?

[sinarad]

I believe that has to do with CSS selection of elements

So when you say " * " you’re telling the computer to select all elements, but the “::before" and "::after” parts I think go a step further. Now you’re telling the computer to also select any elements that may come before or after (in terms of parent/children hierarchy), and for them to have the border-box style as well. This way, it’s sort of full-proof in terms of accounting for everything to have border-box vs. content-box

[ramon2024]

Ok, i think I get it now more or less. Thanks so much you!