Survey Form Project - *::after, *::before & box-sizing: (align problem!)

HTML-CSS
1

EDIT: After inspecting the code from the example, i’ve found this thing in almost every element:

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

Copied that line to the top of my css sheet and suddenly all align and sizes problems are almost fixed; what kind of magic is this? have no idea of what this piece of code means or does! Can someone pls explain a bit or share any related link to read?

My code:
https://codepen.io/juanpais/pen/QWyJQGN?editors=1100

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0.

Challenge: Build a Survey Form

Link to the challenge:

2

image

by default the sizing is content box. This means that margin, border and padding are not included when you specify the width. Alot of people switch it box-sizing border-box because it means you dont have to calculate the the real width. The width is the real width.

alot of people start with the following settings:

  • {

    margin:0;

    padding:0;

    box-sizing:border-box;
    }

It means that the width you say the box should be, is its true size. The star means apply to all children.

1 Like
3

Thanks, also read this article.

The *, after and before selectores were also a surprise for me, this is the first time i’ve saw such a thing.

Will try to keep coding and learning,

Thanks!