For example, I want the words in the picture above to be displayed at the bottom, and sometimes the title is two lines, so setting margin-top certainly cannot solve the problem at once.
is similar to the following part:
<div> <p>巴萨憾负塞尔塔,梅西哭晕在厕所。</p></div>
You misunderstood the meaning of this attribute. It refers to the bottom margin of the element you set. But it does not mean that it is at the bottom of the parent element, nor does it mean that its child elements will be displayed at the bottom of it. In the case like you said, it will only work if you use absolute positioning and set bottom:0.
margin-bottom works. I have used it many times.
You misunderstood the meaning of this attribute. It refers to the bottom margin of the element you set. But it does not mean that it is at the bottom of the parent element, nor does it mean that its child elements will be displayed at the bottom of it. In this case like you said, it will only work if you use absolute positioning and set bottom:0.
It doesn’t mean, for example: you have two boxes to be placed from top to bottom. If you set margin-bottom:10px for the first box, then the second box will be farther away from the first box. 10px, if set to 0, it will be next to the first one (of course the second margin-top is also set to 0), margin-bottom is to set the interval between elements of the same level, not to set it in the parent position within the element.
Is it valid?
No, for example: you have two boxes to be placed from top to bottom. If margin-bottom is set for the first box :10px, then the second box will be 10px away from the first box. If it is set to 0, it will be next to the first one (of course when the margin-top of the second one is also set to 0), margin-bottom is Setting the spacing between sibling elements does not set its position within the parent element.
It works, right?