To solve such problems, I recommend using the browser's development tools. For most browsers: Right-click the element you want to learn more about and select "Inspect Element." At the very bottom of the Styles tab, you have a CSS box model. This is a great tool for visualizing borders, padding, and margins and which elements are the source of your styling issues.
2
404
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Certain HTML elements have predefined margins (ie:
body,h1toh6,p,>fieldset、form、ul、ol、dl、dir>、menu,blockquoteanddd).In your case, it is
h1that is causing your problem. By default it has{ margin: .67em }. If you set it to 0, it will remove spaces.To solve such problems, I recommend using the browser's development tools. For most browsers: Right-click the element you want to learn more about and select "Inspect Element." At the very bottom of the Styles tab, you have a CSS box model. This is a great tool for visualizing borders, padding, and margins and which elements are the source of your styling issues.
I would say that using a global reset is a terrible way to solve this problem.
* { margin: 0; padding: 0; }The reason why h1 margins pop up from the parent is that the parent has no padding.
If you add padding to h1's parent element, the margin will be inside the parent element.
Resetting all padding and margins to 0 can cause a lot of side effects. Then it's better to remove the margins for that particular title.