There seems to be something wrong with this picture, I don’t know if there is any context
Picture caption When it comes to margins, it should refer to margin, but p is not set, and the default is 0
The silver part around 30px+20px = 50px, the two p's are separated by 20px, it should be a 5:2 relationship, the visual inspection of the picture is 2:1
p padding is 0, unless the font is special, the text should be close to the left side, and the letter p should be close to the bottom edge
The padding-top of the parent element will push the child element down, and the margin-top of the child element will move down to leave margins. So even if your child element's margin-top -10px moves it up 10px but the parent element adds padding-top 10px, it also offsets the child element and moves it down 10px, which means it doesn't move
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
There seems to be something wrong with this picture, I don’t know if there is any context
Picture caption When it comes to margins, it should refer to margin, but p is not set, and the default is 0
The silver part around 30px+20px = 50px, the two p's are separated by 20px, it should be a 5:2 relationship, the visual inspection of the picture is 2:1
p padding is 0, unless the font is special, the text should be close to the left side, and the letter p should be close to the bottom edge
The padding-top of the parent element will push the child element down, and
the margin-top of the child element will move down to leave margins.
So even if your child element's margin-top -10px moves it up 10px
but the parent element adds padding-top 10px, it also offsets the child element and moves it down 10px, which means it doesn't move