{ margin: 0; padding: 0; } what is the exact meaning of this?

If you take a look at the CSS Box Model, you can think of any HTML element as a set of boxes. The content box, for example, would be the text or image that is the actual visible content of the element. The border, which can be made visible or invisible, is the "box" that wraps around the content box (although it doesn't have to be rectangular like the "box" name implies.

Padding and margin are invisible clearing areas inside and outside the border.

Padding is the space between the border and the content so that if you have text in an element, the padding helps to make sure the text does not flush against border. Just like an actual box full of contents (such as a package you might want to ship out), you can add foam peanuts, or padding, around the contents so that it doesn't touch the sides of the (border) box.

For zero padding, imagine putting a box into a box where the inner box is just slightly smaller so it fits perfectly. There is no space between the inner (content) box and the outer (border) box so there is zero padding.

Margin is just the space outside the border. This is important for how you want your element to appear when other elements are nearby. If margin is zero, other elements (inline, above and below) will be be flush against your element.

I recommend these two stages The Box Model stage in the CSS Foundations Course (Web Design track) and The Box Model stage in the CSS Basics Course (Front-End Web Development track).